html5波浪效果,HTML5 Canvas玩转酷炫大波浪进度图效果实例（附demo）

效果,HTML5 Canvas玩转酷炫大波浪进度图效果实例（附demo）"/>

html5波浪效果,HTML5 Canvas玩转酷炫大波浪进度图效果实例（附demo）

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

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

由于最近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();

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