html画布动画,画布动画(Canvas Animation)

画布动画(Canvas Animation)

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

以下是两个重要的Javascript方法，用于在画布上制作动画图像 -Sr.No.方法和描述

1setInterval(callback, time);

该方法在给定的time毫秒后重复执行所提供的代码。

2setTimeout(callback, time);

此方法在给定的time毫秒后仅执行一次提供的代码。

例子 (Example)

以下是一个简单的例子，可以重复旋转一个小图像 -

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.');

}

}

以上示例将产生以下结果 -

新页面打开