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中Media Queries的相关使用
Jul 17 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 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
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
python实现复制整个目录的方法
2015/05/12 Python
python实现SOM算法
2018/02/23 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
信息专业本科生个人的自我评价
2013/10/28 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
党校团干班培训心得体会
2016/01/06 职场文书