HTML5 Canvas玩轉(zhuǎn)酷炫大波浪進(jìn)度圖效果實例（附demo）
我要評論本文介紹了HTML5 Canvas玩轉(zhuǎn)酷炫大波浪進(jìn)度圖效果，具體如下：
如上圖所見，本文就是要實現(xiàn)上面那種效果。
由于最近AlloyTouch要寫一個下拉刷新的酷炫loading效果。所以首選大波浪進(jìn)度圖。
首先要封裝一下大波浪圖片進(jìn)度組件?；镜脑硎抢肅anvas繪制矢量圖和圖片素材合成出波浪特效。
了解quadraticCurveTo
quadraticCurveTo() 方法通過使用表示二次貝塞爾曲線的指定控制點，向當(dāng)前路徑添加一個點。
JavaScript 語法：
context.quadraticCurveTo(cpx,cpy,x,y);
參數(shù)值
cpx 貝塞爾控制點的 x 坐標(biāo)
cpy 貝塞爾控制點的 y 坐標(biāo)
x 結(jié)束點的 x 坐標(biāo)
y 結(jié)束點的 y 坐標(biāo)
如：
ctx.moveTo(20,20); ctx.quadraticCurveTo(20,100,200,20); ctx.stroke();
通過上面代碼可以繪制一條二次貝塞爾曲線，具體原理效果看下圖：
嘗試?yán)L制波浪
var waveWidth = 300,
offset = 0,
waveHeight = 8,
waveCount = 5,
startX = -100,
startY = 208,
progress = 0,
progressStep = 1,
d2 = waveWidth / waveCount,
d = d2 / 2,
hd = d / 2,
c = document.getElementById("myCanvas"),
ctx = c.getContext("2d");
function tick() {
offset -= 5;
progress += progressStep;
if (progress > 220 || progress < 0) progressStep *= -1;
if (-1 * offset === d2) offset = 0;
ctx.clearRect(0, 0, c.width, c.height);
ctx.beginPath();
var offsetY = startY - progress;
ctx.moveTo(startX - offset, offsetY);
for (var i = 0; i < waveCount; i++) {
var dx = i * d2;
var offsetX = dx + startX - offset;
ctx.quadraticCurveTo(offsetX + hd, offsetY + waveHeight, offsetX + d, offsetY);
ctx.quadraticCurveTo(offsetX + hd + d, offsetY - waveHeight, offsetX + d2, offsetY);
}
ctx.lineTo(startX + waveWidth, 300);
ctx.lineTo(startX, 300);
ctx.fill();
requestAnimationFrame(tick);
}
tick();
可以看到無限運動的波浪：
這里需要主要，繪制的區(qū)域要比Canvas大來隱藏?fù)u擺校正的圖像，上面使用了200200的Canvas。
大家把代碼clone下來可以試試把它繪制到一個大的Canvas上就可以明白。
這里通過if (-1 offset === d2) offset = 0;來實現(xiàn)無限循環(huán)。
d2就是一個波峰+波谷的長度。一個波峰+一個波谷之后又開始同樣的生命周期和從0開始一樣，所以可以重置為0。
了解globalCompositeOperation
globalCompositeOperation 屬性說明了繪制到畫布上的顏色是如何與畫布上已有的顏色組合起來的。
繪制大波浪進(jìn)度圖會用到：
ctx.globalCompositeOperation = "destination-atop";
destination-atop意義：畫布上已有的內(nèi)容只會在它和新圖形重疊的地方保留。新圖形繪制于內(nèi)容之后。
當(dāng)然，globalCompositeOperation還有很多選項，這里不一一列舉，大家可以試試設(shè)置其他的屬性來調(diào)整出很酷炫的疊加特效。
整體實現(xiàn)
var img = new Image();
function tick() {
...
...
ctx.fill();
ctx.globalCompositeOperation = "destination-atop";
ctx.drawImage(img, 0, 0);
requestAnimationFrame(tick);
}
img.onload = function () {
tick();
};
img.src = "asset/alloy.png";
為了代碼簡單直接，這里免去了封裝一個加載器的代碼，直接通過new Image來設(shè)置src來加載圖片。
在繪制完矢量圖之后，設(shè)置globalCompositeOperation，然后再繪制企鵝圖片，繪制順序不能搞錯。
最后
實例下載：demo
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
HTML5超炫酷粒子效果的進(jìn)度條的實現(xiàn)示例
這篇文章主要介紹了HTML5超炫酷粒子效果的進(jìn)度條的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來2019-08-23HTML5觸摸事件實現(xiàn)移動端簡易進(jìn)度條的實現(xiàn)方法
這篇文章主要介紹了HTML5觸摸事件實現(xiàn)移動端簡易進(jìn)度條的實現(xiàn)方法的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-04HTML5實現(xiàn)自帶進(jìn)度條和滑塊滑桿效果
本文給大家介紹了HTML5實現(xiàn)自帶進(jìn)度條和滑塊滑桿效果，運用progress標(biāo)簽，設(shè)置好min和max數(shù)值就好，可以用value獲取其中的進(jìn)度值。具體實現(xiàn)代碼大家參考下本文2018-04-17html5新增的定時器requestAnimationFrame實現(xiàn)進(jìn)度條功能
html5為什么新增一個requestAnimationFrame，他的出現(xiàn)是為了解決什么問題？帶著這些問題跟隨腳本之家小編一起學(xué)習(xí)吧2018-12-13
HTML5 Canvas 實現(xiàn)圓形進(jìn)度條并顯示數(shù)字百分比效果示例
本篇文章主要介紹了HTML5 Canvas 實現(xiàn)圓形進(jìn)度條并顯示數(shù)字百分比效果示例，具有一定的參考價值，有興趣的可以了解一下2017-08-18
HTML5+CSS3網(wǎng)頁加載進(jìn)度條的實現(xiàn)，下載進(jìn)度條的代碼實例
本篇文章主要介紹了HTML5+CSS3網(wǎng)頁加載進(jìn)度條的實現(xiàn)，下載進(jìn)度條的代碼實例，具有一定的參考價值，有興趣的可以了解一下。2016-12-30使用Html5實現(xiàn)異步上傳文件,支持跨域,帶有上傳進(jìn)度條
下面小編就為大家?guī)硪黄褂肏tml5實現(xiàn)異步上傳文件,支持跨域,帶有上傳進(jìn)度條。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-17淺談Html5中視頻 音頻標(biāo)簽 進(jìn)度條的問題
下面小編就為大家?guī)硪黄獪\談Html5中視頻 音頻標(biāo)簽 進(jìn)度條的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-26HTML5中的進(jìn)度條progress元素簡介及兼容性處理
HTML5能夠用progress標(biāo)簽直接向頁面添加進(jìn)度條,這還是相當(dāng)exciting的,不過各瀏覽器下的默認(rèn)顯示效果會有差異,這里我們就來看看HTML5中的進(jìn)度條progress元素簡介及兼容性處2016-06-02html5+css3進(jìn)度條倒計時動畫特效代碼【推薦】
下面小編就為大家分享一篇html5+css3進(jìn)度條倒計時動畫特效代碼【推薦】。希望對大家有所幫助。一起跟隨小編過來看看吧2016-03-08
