怎么在H5中使用canvas實(shí)現(xiàn)一個(gè)動態(tài)圖形功能？針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號開發(fā)，軟件開發(fā)，微信平臺小程序開發(fā)，10余年建站對成都公路鉆孔機(jī)等多個(gè)行業(yè)，擁有多年建站經(jīng)驗(yàn)。

什么是動畫？

我們在繪制動畫之前必須要弄清楚什么是動畫，一個(gè)動畫最起碼需要哪些基本條件呢？

我們可以用一個(gè)工具展示動畫是什么？

這是利用PPT繪制出的一個(gè)動畫效果

根據(jù)以上PPT繪制出的一個(gè)動畫效果我們可以看到，快速在幾張PPT頁面進(jìn)行切換時(shí)連起來看到的就是一個(gè)動畫效果。

這就是動畫實(shí)現(xiàn)的基本要素：

單位時(shí)間內(nèi)連續(xù)播放多張圖片。這個(gè)單位時(shí)間一般以秒為單位，在計(jì)算機(jī)渲染的圖形中要想獲得一個(gè)足夠流暢的視頻，每秒鐘內(nèi)的圖片數(shù)量必須要大于等于顯示器的刷新頻率（這個(gè)刷新頻率一般為60hz）

每圖片內(nèi)的物體狀態(tài)（大小，形狀，顏色，位置，角度等等）必須要發(fā)生改變

那么我們在canvas中如何實(shí)現(xiàn)這兩個(gè)條件呢？

如何在1s內(nèi)繪制60張圖形

我們可以把這話變形一下，就變成每隔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è)來實(shí)現(xiàn)我們所需要的每隔1/60s繪制一張圖形

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

最終效果

但是現(xiàn)在還沒有一個(gè)動畫效果，因?yàn)?s內(nèi)繪制的60張圖形都是一模一樣的，所以接下來就要在每一張圖形繪制的時(shí)候改變元素的狀態(tài)。

順便給大家推薦一個(gè)裙，它的前面是 537，中間是631，最后就是 707。想要學(xué)習(xí)前端的小伙伴可以加入我們一起學(xué)習(xí)，互相幫助。群里每天晚上都有大神免費(fèi)直播上課，如果不是想學(xué)習(xí)的小伙伴就不要加啦。

（537-631-707）

如何改變元素的狀態(tài)？

一個(gè)圓的位置是由圓心的坐標(biāo)決定的，那么我們在每次繪制canvas的時(shí)候就改變一次元素的位置即可

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

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

vary=100;//給一個(gè)初始的圓心位置，接下來每次繪制的時(shí)候圓心的y位置都往下移動一個(gè)距離
setInterval(function(){
canCon.clearRect(0，0，500，500);//擦除一個(gè)矩形區(qū)域 矩形的左上角坐標(biāo)和矩形的寬高
canCon.fillStyle="black";
//canCon.fill的意思在這張宣紙上拿起一只畫實(shí)心圖形的筆，
//style="black"的意思就是蘸上一個(gè)黑色墨
//連起來看的話就是拿起一只畫實(shí)心圖形的筆并粘上有黑色的墨水
canCon.arc(233,y++,66,0,Math.PI*2);
//在宣紙上構(gòu)思畫一個(gè)圓（圓心的X位置，Y位置，圓的半徑，從什么位置開始畫圓，畫到哪里結(jié)束）；
canCon.fill();//下筆作畫
},1000/60)

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

vary=100;//給一個(gè)初始的圓心位置，接下來每次繪制的時(shí)候圓心的y位置都往下移動一個(gè)距離
setInterval(function(){
canCon.beginPath();//把筆抬起來
canCon.clearRect(0，0，500，500);//擦除一個(gè)矩形區(qū)域 矩形的左上角坐標(biāo)和矩形的寬高
canCon.fillStyle="black";
//canCon.fill的意思在這張宣紙上拿起一只畫實(shí)心圖形的筆，
//style="black"的意思就是蘸上一個(gè)黑色墨
//連起來看的話就是拿起一只畫實(shí)心圖形的筆并粘上有黑色的墨水
canCon.arc(233,y++,66,0,Math.PI*2);
 //在宣紙上構(gòu)思畫一個(gè)圓（圓心的X位置，Y位置，圓的半徑，從什么位置開始畫圓，畫到哪里結(jié)束）；
canCon.fill();//下筆作畫
},1000/60)

關(guān)于怎么在H5中使用canvas實(shí)現(xiàn)一個(gè)動態(tài)圖形功能問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

分享名稱：怎么在H5中使用canvas實(shí)現(xiàn)一個(gè)動態(tài)圖形功能
文章起源：http://jinyejixie.com/article16/gcedgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站內(nèi)鏈、網(wǎng)站改版、軟件開發(fā)、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)