H5最強接口之canvas實現動態圖形功能

上個文章我們分享如何利用canvas來進行圖形繪製，但是繪製的都是靜態圖形，本週我們就來學習如何利用canvas進行動態圖形繪製。

我們在繪製動畫之前必須先弄清楚什麼是動畫，一個動畫最起碼需要哪些基本條件呢？

我們可以用一個工具來展示動畫是什麼？

這是利用PPT繪製出來的動畫效果

根據以上PPT繪製出的一個動畫效果我們可以看到，快速在幾張PPT頁面進行切換時連起來看到的就是一個動畫效果。

這就是動畫實現的基本要素：

單位時間內連續播放多張圖片。這個單位時間一般以秒為單位，在計算機渲染的圖形中要想獲得一個足夠流暢的視頻，每秒內的圖片數量必須要大於等於顯示器的刷新頻率（這個刷新頻率一般為60hz）

每張圖片內的物體狀態（大小，形狀，顏色，位置，角度等等）必須改變

那我們在canvas中如何實現這兩個條件呢？

我們可以把這話變形一下，就變成每隔1/60s就畫一張圖形。在JavaScript中要實現每隔一段時間做一件事情，我們使用的方法是用定時器setinterval。

setinerval（function f(){}，t），定時器內部可以傳入兩個參數，一個是函數，一個是時間，這個程式碼的意思是每隔t ms就執行一次函數f。

那我們就用這個來實現我們所需要的每隔1/60s繪製一張圖形

 setInterval(function(){canCon.fillStyle=black;//canCon.fill的意思在這張宣紙上拿起一隻畫實心圖形的筆，//style=black的意思就是蘸上一個黑色墨//連起來看的話就是拿起一隻畫實心圖形的筆並黏上有黑色的墨水canCon.arc(233,233,66,0,Math.PI*2); //在宣紙上構思畫一個圓（圓心的X位置，Y位置，圓的半徑，從什麼位置開始畫圓，畫到哪裡結束）；canCon.fill();//下筆作畫},1000/60 )

最終效果

但現在還沒有一個動畫效果，因為1s內繪製的60張圖形都是一模一樣的，所以接下來就要在每一張圖形繪製的時候改變元素的狀態。

順便推薦一個裙，它的前面是537，中間是631，最後是707。想要學習前端的小夥伴可以加入我們一起學習，互相幫助。群組每天晚上都有大神免費直播上課，如果不是想學習的朋友就不要加啦。

（537-631-707）

如何改變元素的狀態？

一個圓的位置是由圓心的座標決定的，那麼我們在每次繪製canvas的時候就改變一次元素的位置即可

 vary=100;//給一個初始的圓心位置，接下來每次繪製的時候圓心的y位置都往下移動一個距離setInterval(function(){canCon.fillStyle=black;//canCon.fill的意思在這張宣紙上拿起一隻畫實心圖形的筆，//style=black的意思就是沾上一個黑色墨//連起來看的話就是拿起一隻畫實心圖形的筆並粘上有黑色的墨水canCon.arc(233,y++,66,0,Math.PI*2);//在宣紙上構思畫一個圓（圓心的X位置，Y位置，圓的半徑，從什麼位置開始畫圓，畫到哪裡結束）；canCon.fill();//下筆作畫},1000/60)

此時我們看到的不是運動的圓，更像是不斷延伸的進度條。原因其實很簡單，咱們在每次繪製一個新的圖形的時候沒有把原來的圖形給擦出掉了，這樣的畫面就是n多圖形疊加在一起的結果了。所以我們每次在繪製新的圖形的時候就要把原來的給擦除掉，那麼如何做到呢？

 vary=100;//給一個初始的圓心位置，接下來每次繪製的時候圓心的y位置都往下移動一個距離setInterval(function(){canCon.clearRect(0，0，500，500);/ /擦除一個矩形區域矩形的左上角座標和矩形的寬高canCon.fillStyle=black;//canCon.fill的意思在這張宣紙上拿起一隻畫實心圖形的筆，//style=black的意思就是蘸上一個黑色墨//連起來看的話就是拿起一隻畫實心圖形的筆並粘上有黑色的墨水canCon.arc(233,y++,66 ,0,M ath.PI*2);//在宣紙上構思畫一個圓（圓心的X位置，Y位置，圓的半徑，從什麼位置開始畫圓，畫到哪裡結束）；canCon.fill();//下筆作畫},1000/60)

但此時還是沒有效果，那麼到底是什麼情況呢？我們可以回想一下我們小時候畫畫的場景，我們在擦除畫紙上某一區域的時候是不是需要先把畫筆抬起來，這樣的話我們才能用橡皮擦擦掉紙上的某些區域，所以我們在擦除canvas的某個區域之前先要把筆給抬起才行。

 vary=100;//給一個初始的圓心位置，接下來每次繪製的時候圓心的y位置都往下移動一個距離setInterval(function(){canCon.beginPath();//把筆抬起來canCon. clearRect(0，0，500，500);//擦除一個矩形區域矩形的左上角座標和矩形的寬高canCon.fillStyle=black;//canCon.fill的意思在這張宣紙上拿起一隻畫實心圖形的筆，//style=black的意思就是蘸上一個黑色墨//連起來看的話就是拿起一支畫實心圖形的筆並黏上有黑色的墨水canCon.arc(233,y++,66,0,Math.PI*2); //在宣紙上構思畫一個圓（圓心的X位置，Y位置，圓的半徑，從什麼位置開始畫圓，畫到哪裡結束）；canCon.fill();//下筆作畫},1000/60 )

這樣我們就能得到一個運動的圓了

以上所述是小編給大家介紹的H5最強接口之canvas實現動態圖形功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！