HTML5技术

HTML5 Canvas玩转酷炫大波浪进度图 - 【当耐特】

字号+ 作者:H5之家 来源:H5之家 2016-12-14 11:01 我要评论( )

如上图所见,本文就是要实现上面那种效果。 由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。 首先要封装一下大波浪图片进度组件。基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效。 本文的代码你可以在这里https:/

如上图所见,本文就是要实现上面那种效果。
由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。
首先要封装一下大波浪图片进度组件。基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效。

本文的代码你可以在这里https://github.com/AlloyTeam/AlloyTouch/blob/master/refresh/wave/image_wave.html找到。

了解quadraticCurveTo

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

JavaScript 语法:
context.quadraticCurveTo(cpx,cpy,x,y);
参数值

如:

)); ctx.stroke();

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

尝试绘制波浪

offset waveHeight waveCount startX startY progress progressStep d2 = waveWidth / waveCount, d = d2 / 2, hd = d / 2, c = document.getElementById("myCanvas"), ctx () { offset progress progress (offset ...offsetY (i offsetX ....();

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

这里需要主要,绘制的区域要比Canvas大来隐藏摇摆校正的图像,上面使用了200200的Canvas。
大家把代码clone下来可以试试把它绘制到一个大的Canvas上就可以明白。
这里通过if (-1 offset === d2) offset = 0;来实现无限循环。
d2就是一个波峰+波谷的长度。一个波峰+一个波谷之后又开始同样的生命周期和从0开始一样,所以可以重置为0。

了解globalCompositeOperation

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

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

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

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

整体实现

()() { ... ... .).() .

为了代码简单直接,这里免去了封装一个加载器的代码,直接通过new Image来设置src来加载图片。
在绘制完矢量图之后,设置globalCompositeOperation,然后再绘制企鹅图片,绘制顺序不能搞错。

最后

更多例子演示和代码可以在Github上找到。
Github:https://github.com/AlloyTeam/AlloyTouch
未完待续预告:《AlloyTouch大波浪刷新》


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5实现GIF图效果 - string卿

    html5实现GIF图效果 - string卿

    2016-12-13 10:01

  • Html5 Json应用 - 飞翔的月亮

    Html5 Json应用 - 飞翔的月亮

    2016-12-12 17:00

  • HTML5 与 CSS3 jQuery部分知识总结 - 细数逝去的过往

    HTML5 与 CSS3 jQuery部分知识总结 - 细数逝去的过往

    2016-12-12 15:00

  • HTML5之文件API - 覃

    HTML5之文件API - 覃

    2016-12-12 14:01

网友点评