HTML5用canvas怎麽實現動畫效果

使用HTML5畫布canvas能夠快速實現簡單的動畫效果，基本原理如下：

每隔壹定時間繪制圖形並且清除圖形，用來模擬出壹個動畫過程，可以使用context.clearRect(0, 0, x, y)方法來刷新需要繪制的圖形

首先是繪制圖形的方法，如下：

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

}

以上方法每隔壹定時間清除畫布內容，並且重新計算繪制圖形位置，壹旦超過了畫布大小，則反轉坐標繪制圖形。