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

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幀的大雁飛行圖片實現的效果：

源圖像：

程序代碼：

代碼如下:

發現上傳透明PNG格式有點問題，所以我上傳不透明的圖片。可以用其它圖片替換，替換以后請修改最大幀數從22到你的實際幀數即可運行。

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