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之多背景background使用示例
Oct 18 HTML / CSS
css3高级选择器使用方法
Dec 02 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
html粘性页脚的具体使用
Jan 18 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
Syphon 秘笈
2021/03/03 冲泡冲煮
php下MYSQL limit的优化
2008/01/10 PHP
php图片缩放实现方法
2014/02/20 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
JavaScript的Function详细
2006/11/14 Javascript
认识延迟时间为0的setTimeout
2008/05/16 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
python logging日志模块以及多进程日志详解
2018/04/18 Python
Python Logging 日志记录入门学习
2018/06/02 Python
python保存文件方法小结
2018/07/27 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
django+echart数据动态显示的例子
2019/08/12 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
软件测试有哪些?什么是配置项?
2012/02/12 面试题
个人党性剖析材料
2014/02/03 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android