HTML5Canvasdraw方法制作動畫效果示例_html5教程技巧

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

源圖像：

程序代碼：

代碼如下:

發(fā)現(xiàn)上傳透明PNG格式有點問題，所以我上傳不透明的圖片?？梢杂闷渌鼒D片替換，替換以后請修改最大幀數(shù)從22到你的實際幀數(shù)即可運行。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com