HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)


Posted in HTML / CSS onDecember 14, 2016

本文介绍了HTML5 Canvas玩转酷炫大波浪进度图效果,具体如下:

HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)

如上图所见,本文就是要实现上面那种效果。

由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。

首先要封装一下大波浪图片进度组件。基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效。

了解quadraticCurveTo

quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点。

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();

通过上面代码可以绘制一条二次贝塞尔曲线,具体原理效果看下图:

HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)

尝试绘制波浪

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();

可以看到无限运动的波浪:

HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)

这里需要主要,绘制的区域要比Canvas大来隐藏摇摆校正的图像,上面使用了200200的Canvas。

大家把代码clone下来可以试试把它绘制到一个大的Canvas上就可以明白。

这里通过if (-1  offset === d2) offset = 0;来实现无限循环。

d2就是一个波峰+波谷的长度。一个波峰+一个波谷之后又开始同样的生命周期和从0开始一样,所以可以重置为0。

了解globalCompositeOperation

globalCompositeOperation 属性说明了绘制到画布上的颜色是如何与画布上已有的颜色组合起来的。

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

ctx.globalCompositeOperation = "destination-atop";

destination-atop意义:画布上已有的内容只会在它和新图形重叠的地方保留。新图形绘制于内容之后。

当然,globalCompositeOperation还有很多选项,这里不一一列举,大家可以试试设置其他的属性来调整出很酷炫的叠加特效。

整体实现

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来设置src来加载图片。

 在绘制完矢量图之后,设置globalCompositeOperation,然后再绘制企鹅图片,绘制顺序不能搞错。

最后

实例下载:demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 #HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 #HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 #HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 #HTML / CSS
HTML5标签大全
Nov 23 #HTML / CSS
HTML5拖放效果的实现代码
Nov 17 #HTML / CSS
html5 div布局与table布局详解
Nov 16 #HTML / CSS
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
理解JavaScript原型链
2016/10/25 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
深入学习Python中的上下文管理器与else块
2017/08/27 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
python装饰器代替set get方法实例
2019/12/19 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
python利用faker库批量生成测试数据
2020/10/15 Python
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
传播学专业毕业生自荐信
2013/11/04 职场文书
党员干部公开承诺书
2014/03/26 职场文书
迎国庆演讲稿
2014/09/15 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python