canvas学习之粒子动画

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas学习之粒子动画相关的知识,希望对你有一定的参考价值。

项目地址:http://pan.baidu.com/s/1ccTptc

粒子动画意思就是把一个图片粒子画,然后使用粒子作出动画效果,主要两个问题:一个图片如何粒子化,这里面我们使用canvas的getImageData(http://web.jobbole.com/87602/),还有一个是作出轨迹,让粒子按照既定轨迹来运行,我们使用tweet.js(http://www.zhangxinxu.com/study/201612/how-to-use-tween-js.html,) 下载项目后,执行npm install,然后npm run dev,然后打开canvas页面可看到效果

以上是关于canvas学习之粒子动画的主要内容,如果未能解决你的问题,请参考以下文章

教程HTML5 Canvas旋涡粒子动画特效

案例html5 Canvas酷炫粒子图形变形动画特效

canvas——粒子系统

案例如何用html5 制作酷炫的Canvas粒子图形变形动画

canvas动画之二 -- 创建动态粒子网格动画

HTML5粒子螺旋线条3D动画