HTML5 Canvas玩转炫酷大波浪纹进度图实际效果案例

日期:2020-10-11 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

本文详细介绍了HTML5 Canvas玩转炫酷大波浪纹进度图实际效果,实际以下:

如上图所见,本文便是要完成上面那种实际效果。

因为近期AlloyTouch要写1个往下拉更新的炫酷loading实际效果。因此首选大波浪纹进度图。

最先要封裝1下大波浪纹照片进度组件。基础的基本原理是运用Canvas绘图矢量图和照片素材生成出波浪纹殊效。

掌握quadraticCurveTo

quadraticCurveTo() 方式根据应用表明2次贝塞尔曲线图的特定操纵点,向当今相对路径加上1个点。

JavaScript 英语的语法:

context.quadraticCurveTo(cpx,cpy,x,y);

主要参数值

cpx 贝塞尔操纵点的 x 座标

cpy 贝塞尔操纵点的 y 座标

x 完毕点的 x 座标

y 完毕点的 y 座标

如:

ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

根据上面编码能够绘图1条2次贝塞尔曲线图,实际基本原理实际效果看下图:

尝试绘图波浪纹

var waveWidth = 300,
    offset = 0,
    waveHeight = 8,
    waveCount = 5,
    startX = ⑴00,
    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 *= ⑴;

    if (⑴ * 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();

能够看到无尽健身运动的波浪纹:

这里必须关键,绘图的地区要比Canvas大来掩藏摆动校准的图象,上面应用了200200的Canvas。

大伙儿把编码clone下来能够试试把它绘图到1个大的Canvas上便可以搞清楚。

这里根据if (⑴  offset === d2) offset = 0;来完成无尽循环系统。

d2便是1个波峰+波谷的长度。1个波峰+1个波谷以后又刚开始一样的性命周期和从0刚开始1样,因此能够重设为0。

掌握globalCompositeOperation

globalCompositeOperation 特性表明了绘图到画布上的色调是怎样与画布上已有的色调组成起来的。

绘图大波浪纹进度图会用到:

ctx.globalCompositeOperation = "destination-atop";

destination-atop实际意义:画布上已有的內容只会在它和新图型重合的地区保存。新图型绘图于內容以后。

自然,globalCompositeOperation也有许多选项,这里不11例举,大伙儿能够试试设定别的的特性来调剂出很炫酷的叠加殊效。

总体完成

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";

以便编码简易立即,这里免除了封裝1个载入器的编码,立即根据new Image来设定src来载入照片。

 在绘图完矢量图以后,设定globalCompositeOperation,随后再绘图企鹅照片,绘图次序不可以搞错。

最终

案例免费下载:demo

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。