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