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 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
浅谈为什么我的 z-index 又不生效了
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
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
js实现中文实时时钟
2020/01/15 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python函数中不定长参数的写法
2019/02/13 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
softmax及python实现过程解析
2019/09/30 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
党员查摆问题及整改措施
2014/10/10 职场文书
怎样写离婚协议书
2015/01/26 职场文书
公积金接收函格式
2015/01/30 职场文书
新人入职感言
2015/07/31 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL