HTML5 Canvas動畫效果演示
主要思想:
首先要準備一張有連續幀的圖片,然后利用HTML5 Canvas的draw方法在不同的時間間隔繪制不同的幀,這樣看起來就像動畫在播放。
關鍵技術點:
javaScript 函數setTimeout()有兩個參數,第一個是參數可以傳遞一個Javascript方法,
另外一個參數代表間隔時間,單位為毫秒數。代碼示例:
setTimeout( update, 1000/30);
Canvas的API-drawImage()方法,需要指定全部9個參數:
ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);
其中offw, offh是指源圖像的起始坐標點,width, height表示源圖像的寬與高,x2,y2表
示源圖像在目標Canvas上的起始坐標點。
一個22幀的大雁飛行圖片實現的效果: 
源圖像: 
程序代碼:
新聞熱點
疑難解答