html5基本动画条件,执行基本的HTML5 Canvas动画

HTML5 canvas提供了绘制图像并将其完全擦除的必要方法。我们可以利用JavaScript帮助在HTML5画布上模拟良好的动画。

示例

您可以尝试运行以下代码以执行基本的HTML5 Canvas动画-HTML>

var pattern= new Image();

function animate(){

pattern.src = '/html5/images/pattern.jpg';

setInterval(drawShape, 100);

}

function drawShape(){

// get the canvas element using the DOM

var canvas = document.getElementById('mycanvas');

// Make sure we don't execute when canvas isn't supported

if (canvas.getContext){

// use getContext to use the canvas for drawing

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(0,0,0,0.4)';

ctx.strokeStyle = 'rgba(0,153,255,0.4)';

ctx.save();

ctx.translate(150,150);

var time = new Date();

ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() );

ctx.translate(0,28.5);

ctx.drawImage(pattern,-3.5,-3.5);

ctx.restore();

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

}

}