Question

HTML5用canvas怎么实现动画效果

Answer 1

首先是绘制图形的方法，如下：
function myAnimation() {
ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);

if (x_icon < 0 || x_icon > canvas_size_x - size_x) {
stepX = -stepX;
}

if (y_icon < 0 || y_icon > canvas_size_y - size_y) {
stepY = -stepY;
}

x_icon += stepX;
y_icon += stepY;

ctx.drawImage(anim_img, x_icon, y_icon);
}
下面是实际绘制图形方法：
function draw() {
var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");

anim_img = new Image(size_x, size_y);

anim_img.onload = function() {
setInterval('myAnimation()', 5);
}

anim_img.src = '.png';
}