在线演示
使用html5画布能够帮助我们快速实现简单的动画效果,基本原理如下:
每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearrect(0, 0, x, y)方法来刷新需要绘制的图形
首先是绘制图形的方法,如下:
function myanimation() {
ctx.clearrect(0, 0, canvas_size_x, canvas_size_y);
if (x_icon canvas_size_x - size_x) {
stepx = -stepx;
}
if (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 = 'http://www.gbtags.com/gb/networks/avatars/80x8013d6393f-a44c-4180-8cb6-7bf0e4776283.png';
}
以上方法将图形定义,并且调用实际绘制动画的方法,搞定!
如果大家对于html5绘制动画有兴趣,或者希望了解如何模拟物理动画效果,请下面的互动教程,相信能够帮助你更好理解html画布:
html5画布实现的粒子运动效果
原文来自:html5 canvas动画效果实现原理