我們在通過上個文章中的分享我們知道大概有關于如何利用canvas來進行圖形繪制這方面的相關內容,那么今天我們接著來說說有關于“前端接口怎么實現canvas動態(tài)圖形效果?”這個問題的解決方法!
什么是動畫?
我們在繪制動畫之前必須要弄清楚什么是動畫,一個動畫最起碼需要哪些基本條件呢?
我們可以用一個工具展示動畫是什么?
這是利用PPT繪制出的一個動畫效果
根據以上PPT繪制出的一個動畫效果我們可以看到,快速在幾張PPT頁面進行切換時連起來看到的就是一個動畫效果。
這就是動畫實現的基本要素:
單位時間內連續(xù)播放多張圖片。這個單位時間一般以秒為單位,在計算機渲染的圖形中要想獲得一個足夠流暢的視頻,每秒鐘內的圖片數量必須要大于等于顯示器的刷新頻率(這個刷新頻率一般為60hz)
每圖片內的物體狀態(tài)(大小,形狀,顏色,位置,角度等等)必須要發(fā)生改變
那么我們在canvas中如何實現這兩個條件呢?
如何在1s內繪制60張圖形
我們可以把這話變形一下,就變成每隔1/60s就繪制一張圖形。在JavaScript中要想實現每隔一段時間做一件事情,我們使用的方法是用定時器setinterval。
什么是定時器?
setinerval(function f(){},t),
定時器內部可以傳入兩個參數,一個是函數,一個是時間,這個代碼的意思就是每隔t ms就執(zhí)行一次函數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張圖形都是一模一樣的,所以接下來就要在每一張圖形繪制的時候改變元素的狀態(tài)。
順便給大家推薦一個裙,它的前面是 537,中間是631,最后就是 707。想要學習前端的小伙伴可以加入我們一起學習,互相幫助。群里每天晚上都有大神免費直播上課,如果不是想學習的小伙伴就不要加啦。
(537-631-707)
如何改變元素的狀態(tài)?
一個圓的位置是由圓心的坐標決定的,那么我們在每次繪制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);//擦除一個矩形區(qū)域 矩形的左上角坐標和矩形的寬高
canCon.fillStyle="black";
//canCon.fill的意思在這張宣紙上拿起一只畫實心圖形的筆,
//style="black"的意思就是蘸上一個黑色墨
//連起來看的話就是拿起一只畫實心圖形的筆并粘上有黑色的墨水
canCon.arc(233,y++,66,0,Math.PI*2);
//在宣紙上構思畫一個圓(圓心的X位置,Y位置,圓的半徑,從什么位置開始畫圓,畫到哪里結束);
canCon.fill();//下筆作畫
},1000/60)
但此時還是沒有效果,那么到底是什么情況呢?我們可以回想一下我們小時候畫畫的場景,我們在擦除畫紙上某一區(qū)域的時候是不是需要首先把畫筆抬起來,這樣的話我們才能用橡皮擦擦掉紙上的某些區(qū)域,所以我們在擦除canvas的某個區(qū)域之前先要把筆給抬起來才行。
vary=100;//給一個初始的圓心位置,接下來每次繪制的時候圓心的y位置都往下移動一個距離
setInterval(function(){
canCon.beginPath();//把筆抬起來
canCon.clearRect(0,0,500,500);//擦除一個矩形區(qū)域 矩形的左上角坐標和矩形的寬高
canCon.fillStyle="black";
//canCon.fill的意思在這張宣紙上拿起一只畫實心圖形的筆,
//style="black"的意思就是蘸上一個黑色墨
//連起來看的話就是拿起一只畫實心圖形的筆并粘上有黑色的墨水
canCon.arc(233,y++,66,0,Math.PI*2);
//在宣紙上構思畫一個圓(圓心的X位置,Y位置,圓的半徑,從什么位置開始畫圓,畫到哪里結束);
canCon.fill();//下筆作畫
},1000/60)
這樣我們就能得到一個運動的圓了
總結
那么在以上文中的內容就會我們關于“前端接口怎么實現canvas動態(tài)圖形效果?”這個問題的解決方法分享!希望對大家有所幫助,有喜歡html5的小伙伴可以在W3Cschool中進行學習!