建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹“怎么用HTML5 Canvas draw方法制作動(dòng)畫(huà)效果”，在日常操作中，相信很多人在怎么用HTML5 Canvas draw方法制作動(dòng)畫(huà)效果問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用HTML5 Canvas draw方法制作動(dòng)畫(huà)效果”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
HTML5 Canvas動(dòng)畫(huà)效果演示
主要思想：
首先要準(zhǔn)備一張有連續(xù)幀的圖片，然后利用HTML5 Canvas的draw方法在不同的時(shí)間間隔繪制不同的幀，這樣看起來(lái)就像動(dòng)畫(huà)在播放。
關(guān)鍵技術(shù)點(diǎn)：
JavaScript 函數(shù)setTimeout()有兩個(gè)參數(shù)，第一個(gè)是參數(shù)可以傳遞一個(gè)JavaScript方法，
另外一個(gè)參數(shù)代表間隔時(shí)間，單位為毫秒數(shù)。代碼示例：
setTimeout( update, 1000/30);
Canvas的API-drawImage()方法，需要指定全部9個(gè)參數(shù)：
ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);
其中offw, offh是指源圖像的起始坐標(biāo)點(diǎn)，width, height表示源圖像的寬與高，x2,y2表
示源圖像在目標(biāo)Canvas上的起始坐標(biāo)點(diǎn)。
一個(gè)22幀的大雁飛行圖片實(shí)現(xiàn)的效果：
源圖像：
程序代碼：
代碼如下:
HTML Canvas Animations Demo - By Gloomy Fish
Play Animations
發(fā)現(xiàn)上傳透明PNG格式有點(diǎn)問(wèn)題，所以我上傳不透明的圖片?？梢杂闷渌鼒D片替換，替換以后請(qǐng)修改較大幀數(shù)從22到你的實(shí)際幀數(shù)即可運(yùn)行。
到此，關(guān)于“怎么用HTML5 Canvas draw方法制作動(dòng)畫(huà)效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
網(wǎng)頁(yè)名稱：怎么用HTML5Canvasdraw方法制作動(dòng)畫(huà)效果-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://www.dlmjj.cn/article/didecj.html
