This is 腾讯ISUX's Tencent Weibo homepage. Follow now!

腾讯ISUX 收听

腾讯社交用户体验设计,简称ISUX (Internet Soc...

打造高大上的Canvas粒子动画

2016-09-20


首先来看下我们准备要做的粒子动画效果是怎么样的~

是这样:


或者是这样:



甚至是这样:



很酷炫!

那如何去实现类似上面的粒子动画甚至根据自己的喜好去做更多其他轨迹的动画呢~请看下面详细的讲解。

技术选择


因为粒子数量很多,而且涉及到图像像素处理,所以这里使用Canvas是不二选择。


注意,以下演示的代码只是关键代码,重点在于解决思路。

一、绘制粒子轮廓图

首先要在canvas画布上绘制一个由粒子组成的轮廓图,记录下每一个粒子的坐标,这样才能有后续的动画。

1.创建一个元素,并获取Canvas画布渲染上下文

< canvas>是一个双标签元素,通过width和height的值来设置画布的大小。至于ctx(画布渲染上下文),可以理解为画布上的画笔,我们可以通过画笔在画布上随心所欲的绘制图案。如果浏览器不支持canvas会直接显示标签中间自己设定的文字。当然

正在加载...