1簡(jiǎn)介一個(gè)網(wǎng)站有動(dòng)態(tài)效果會(huì)讓網(wǎng)站顯得更加有檔次，會(huì)更吸引網(wǎng)友的目光，隨著時(shí)代的發(fā)展和進(jìn)步，越來(lái)越多的開(kāi)發(fā)者開(kāi)始在前端界面中加入動(dòng)態(tài)效果那么我們今天就一起來(lái)整理和分享一下前端動(dòng)態(tài)效果的制作方法，并對(duì)其中的 Canvas 進(jìn)行一下簡(jiǎn)單的講解2動(dòng)態(tài)效果的分類(lèi)我們首先先來(lái)簡(jiǎn)單看一下，動(dòng)態(tài)效果的。

本地文件播放則是通過(guò)fileReaderreadAsArrayBuffer將文件讀取，然后依然通過(guò)ACdecodeAudioData解碼來(lái)進(jìn)行播放 canvas圖形繪制首先我們得到AnalyserNodefrequencyBinCount，即可視化數(shù)據(jù)值，然后將其存為Uint8Array數(shù)組類(lèi)型，constAudioBufferSourceNode=ACcreateBufferSource這里創(chuàng)建了個(gè)音頻源AudioBufferSource。

必須等到圖片完全加載后才能對(duì)其進(jìn)行操作， 瀏覽器通常會(huì)在頁(yè)面腳本執(zhí)行的同時(shí)異步加載圖片 如果試圖在圖片未完全加載之前就將其呈現(xiàn)到canvas 上，將不會(huì)顯示任何圖片var img= new Imageimgsrc = quotbarkjpgquot 圖片加載完后，將其顯示在canvas 上 imgonload = function drawCanva。

主要思想\x0d\x0a首先要準(zhǔn)備一張有連續(xù)幀的圖片，然后利用HTML5Canvas的draw方法在不同的時(shí)間間隔繪制不同的幀，這樣看起來(lái)就像動(dòng)畫(huà)在播放\x0d\x0a關(guān)鍵技術(shù)點(diǎn)\x0d\x0aJavaScript函數(shù)setTimeout有兩個(gè)參數(shù)，第一個(gè)是參數(shù)可以傳遞一個(gè)JavaScript方法，\x0d\x0a另外一個(gè)參數(shù)代表間隔時(shí)間。

有三個(gè)問(wèn)題1createRadialGradient的參數(shù)數(shù)量不正確，最后一個(gè)逗號(hào)后面沒(méi)有參數(shù)，這是語(yǔ)法錯(cuò)誤2createRadialGradient的參數(shù)中有canvas變量，這是一個(gè)未定義的變量3你用了strokeRect來(lái)畫(huà)圓，這是不帶填充的，要顯示出漸變效果，你需要fillRect方法剩下的就是具體的位置及顏色設(shè)置了。

在圖層模式里在painter中，用戶(hù)可以在圖層末班找到剪輯蒙版，Painter是一款基于Html5Canvas技術(shù)的在線(xiàn)繪圖系統(tǒng)，完全采用html5技術(shù)。

2在indexhtml中的ltbody標(biāo)簽中，輸入js代碼try documentcreateElementquotcanvasquotgetContextquot2dquot#39body#39append#39支持canvas#39 catch e #39body#39append#39不支持canvas#39 3瀏覽器運(yùn)行indexhtml頁(yè)面，此時(shí)會(huì)打印出瀏覽器對(duì)html5 canvas的支持程度。

不光繪制圖片，在高分屏下，繪制文字和線(xiàn)條都會(huì)出現(xiàn)模糊的現(xiàn)象GitHub上有一個(gè)hidpicanvaspolyfill可以很好的解決這個(gè)問(wèn)題，但是沒(méi)有對(duì)圖片進(jìn)行處理如果了解了原因，解決這個(gè)問(wèn)題也很容易。

1AdobeAfterEffectsAdobeAfterEffects是一款強(qiáng)大的專(zhuān)業(yè)動(dòng)畫(huà)和視覺(jué)效果制作軟件它廣泛用于電影電視和廣告制作，支持多種動(dòng)畫(huà)效果和合成技術(shù)2AdobeAnimateAdobeAnimate是用于創(chuàng)建矢量動(dòng)畫(huà)的工具，適用于交互式廣告和網(wǎng)絡(luò)動(dòng)畫(huà)它支持HTML5Canvas輸出，使其在Web廣告制作中特別有用3ToonBoomHarmonyT。

context = canvasget0getContext#392d#39 獲取canvas上下文第一種方法擦除clearRect方法contextclearRect0， 0， canvaswidth， canvasheight第二種方法擦除重新設(shè)置高寬度canvasattr#39width#39， canvaswidthcanvasattr#39height#39， canvasheight。