這篇文章主要介紹“怎么用HTML5 Canvas draw方法制作動畫效果”，在日常操作中，相信很多人在怎么用HTML5 Canvas draw方法制作動畫效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用HTML5 Canvas draw方法制作動畫效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

為黑龍江等地區(qū)用戶提供了全套網頁設計制作服務，及黑龍江網站建設行業(yè)解決方案。主營業(yè)務為成都網站制作、做網站、外貿營銷網站建設、黑龍江網站設計，以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

HTML5 Canvas動畫效果演示
主要思想：
首先要準備一張有連續(xù)幀的圖片，然后利用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幀的大雁飛行圖片實現的效果：
 
源圖像：
 
程序代碼：

代碼如下:

HTML Canvas Animations Demo - By Gloomy Fish

Play Animations

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

到此，關于“怎么用HTML5 Canvas draw方法制作動畫效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
當前名稱：怎么用HTML5Canvasdraw方法制作動畫效果
轉載來源：http://weahome.cn/article/gjisgi.html