最近闲来无事，便去研究canvas，因为canvas可以实现很多炫丽的动画效果，所以就想研究一番，正好看见网上有哥们实现了一个类似的粒子效果，觉得挺不错的，于是乎自己就动手也写了一个。好了，话不多说，直接看效果吧：

下面简单跟大家讲讲基本的实现原理，主要是2个动画的叠加：

1. 粒子本身的缩放
2. 粒子位置的移动

粒子本身的缩放

其实每个粒子本身就是一个圆，只要改变每次改变圆的半径从大到小，再从小到大，就可以实现缩放的效果

粒子位置的移动

首先记录绘制在界面上粒子的位置，然后再随机显示在界面上，然后再计算此时的粒子距离之前粒子的位置，计算之间的距离，然后移动过去即可。

原理其实比较简单，下面我们看看源码：

/**
 * Created by 004928 on 2017/8/2.
 */
 (function (window) {
 window.requestAnimationFrame = 
 window.requestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 window.webkitRequestAnimationFrame ||
 window.msRequestAnimationFrame ;
 window.cancelRequestAnimationFrame = 
 window.cancelRequestAnimationFrame ||
 window.mozCancelRequestAnimationFrame ||
 window.webkitCancelRequestAnimationFrame ||
 window.msCancelRequestAnimationFrame ;
 var w , h ; // 画布宽高
 var particles = []; // 粒子集合
 var temp = [];
 var points = []; // 每个粒子坐标对象的集合
 var delayTime = 2000 ; // 位移动画执行的延迟时间
 var maxRadius = 7 ; // 粒子圆的最大半径
 var animationIncrement = 0.08 ; // 粒子缩放时的增减量
 var offsetY = 7 , offsetX = 7 ; // x , y 轴每隔7个像素点取值
 var speed = 20 ; // 粒子运动速度
 // 粒子颜色库
 var colors = [
 '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
 '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
 '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
 '#FF5722'
 ];
 var down = false , move = false ;
 var requestId , timeId;
 var canvas = null ;
 var ctx = null ;
 /**
 * 初始化canvas
 */
 function initCanvas() {
 canvas = document.getElementById("myCanvas");
 w = window.innerWidth ;
 h = window.innerHeight ;
 canvas.setAttribute('width', w);
 canvas.setAttribute('height', h);
 if(canvas.getContext) {
 ctx = canvas.getContext('2d');
 bindEvent();
 }
 }
 /**
 * cnavas 绑定事件
 */
 function bindEvent() {
 canvas.addEventListener('mousedown' , function (e) {
 down = true ;
 stopAnimation();
 });
 canvas.addEventListener('mousemove' , function (e) {
 if(down) {
 move = true ;
 drawPath({
 x:e.offsetX ,
 y:e.offsetY
 });
 }
 });
 canvas.addEventListener('mouseup' , function (e) {
 down = false ;
 if(move) {
 throttle(graffiti , window);
 }
 move = false ;
 });
 }
 /**
 * 涂鸦
 */
 function graffiti () {
 initParticle();
 randomDraw();
 start();
 points = [] ;
 }
 /**
 * 节流函数
 */
 function throttle (method , context) {
 clearTimeout(method.tId);
 method.tId = setTimeout(function () {
 method.call(context);
 } , delayTime);
 }
 /**
 * 绘制路径
 */
 function drawPath (point) {
 points.push(point);
 ctx.fillStyle = '#fff';
 ctx.beginPath();
 ctx.arc(point.x , point.y , Math.floor(Math.random() * maxRadius + 1) , 0 , 2 * Math.PI);
 ctx.fill();
 }
 /**
 * 初始化粒子个数
 */
 function initParticle () {
 particles = [] ;
 temp = [] ;
 // 拿到画布的所有像素点信息
 // 每个像素点包含了rgba 四个值，
 // 而这个pxData是一个一维数组,每4位保存一个像素点信息
 var pxData = ctx.getImageData(0 , 0 , w , h);
 // 将4位表示的像素点信息，转化为1位来表示，
 // 即数组中的每个元素表示一个像素
 var buffer32 = new Uint32Array(pxData.data.buffer);
 // 找到数组中有像素信息的点，并创建粒子
 // 因为数组是一维数组，j * w + i 计算当前遍历的数组下标
 for(var j = 0 ; j < h ; j += offsetY) {
 for(var i = 0 ; i < w ; i += offsetX) {
 if(buffer32[ j * w + i]) {
 particles.push(new Particles(i , j , colors[i % colors.length]));
 // 在移动粒子的时候需要用到
 temp.push(new Particles(0 , 0 , colors[i % colors.length]));
 }
 }
 }
 }
 /**
 * 首先随机绘制在屏幕上
 */
 function randomDraw () {
 ctx.clearRect( 0 , 0 , w , h);
 for(var l = 0 ; l < temp.length ; l ++) {
 var p = temp[l];
 setRadius(p);
 if(p.x == 0) p.x = randomInteger(w);
 if(p.y == 0) p.y = randomInteger(h);
 draw(p);
 }
 requestId = requestAnimationFrame(randomDraw);
 }
 /**
 * 随机产生 1 - max 之间的整数
 * @param max
 * @returns {number}
 */
 function randomInteger (max) {
 return Math.floor(Math.random() * max + 1);
 }
 /**
 * 粒子对象
 */
 function Particles (x , y , color) {
 this.x = x ;
 this.y = y ;
 this.color = color ; // 粒子颜色
 this.r = Math.floor(Math.random() * maxRadius + 1); // 随机产生粒子的半径 1 - 5
 this.zoom = Math.floor(Math.random() * 2) == 0 ? -1 : 1 ; // 0 表示缩小，1表示放大
 }
 /**
 * 循环执行动画
 */
 function loop () {
 ctx.clearRect( 0 , 0 , w , h);
 for(var l = 0 ; l < particles.length ; l ++) {
 var p = particles[l];
 var t = temp[l];
 calcPosition(p , t);
 setRadius(t);
 draw(t);
 }
 requestId = requestAnimationFrame(loop);
 }
 /**
 * 2s 之后 聚合成要显示的文本样式
 */
 function start () {
 timeId = setTimeout(function () {
 cancelRequestAnimationFrame(requestId);
 loop();
 } , delayTime);
 }
 /**
 * 设置粒子的半径（递增/递减）
 */
 function setRadius (p) {
 if(p.zoom > 0) {
 p.r += animationIncrement ;
 if(p.r >= maxRadius ) p.zoom = -1 ;
 } else {
 p.r -= animationIncrement ;
 if(p.r <= 1) p.zoom = 1 ;
 }
 }
 /**
 * 计算粒子的位置
 */
 function calcPosition (p , t) {
 var vx = ( p.x - t.x ) / speed ;
 var vy = ( p.y - t.y ) / speed ;
 t.x += vx ;
 t.y += vy ;
 if(vx > 0) {
 if(t.x >= p.x ) t.x = p.x ;
 } else {
 if(t.x <= p.x ) t.x = p.x ;
 }
 if(vy > 0) {
 if(t.y >= p.y ) t.y = p.y ;
 } else {
 if(t.y <= p.y ) t.y = p.y ;
 }
 }
 /**
 * 绘制粒子
 * @param t
 */
 function draw (t) {
 ctx.fillStyle = t.color;
 ctx.beginPath();
 ctx.arc(t.x , t.y , t.r , 0 , 2 * Math.PI);
 ctx.fill();
 }
 /**
 * 停止动画
 */
 function stopAnimation () {
 if(requestId || timeId) {
 cancelRequestAnimationFrame(requestId);
 clearTimeout(timeId);
 requestId = timeId = null ;
 ctx.clearRect(0 , 0 , w, h);
 }
 }
 window.onload = initCanvas ;
 })(window);

其实主要的逻辑在 initParticle 方法，通过 ctx.getImageData 拿到画布上所有的像素点信息得到的数据是一个一维数组，且每4个数据表示一个像素点信息比如 [0,0,0,1 ,0,2,3,0] ,我们可以看到这个数组中有8个值,那么前面4个值表示第一个像素点信息，后面4个表示第二个像素点信息。且4个值分别对应 r , g , b , a 这四个值。然后通过 Uint32Array 方法将4位表示一个像素点信息的数据，变成1位表示一个像素点的数组,因此上面8位的数组就变[001100 , 003300](数据我是瞎编的，忽略) 然后遍历转换后的数组，凡是有值的，就是出现在界面上的点（大家可以在canvas上写段文字，然后打印ctx.getImageData获取到的数据便知）

for(var j = 0 ; j < h ; j += offsetY) {
 for(var i = 0 ; i < w ; i += offsetX) {
 if(buffer32[ j * w + i]) {
 particles.push(new Particles(i , j , colors[i % colors.length]));
 // 在移动粒子的时候需要用到
 temp.push(new Particles(0 , 0 , colors[i % colors.length]));
 }
 }
}

如上，即可拿到所有绘制在界面上的粒子，因为数组是一维的，而粒子要绘制在界面上是需要X,Y坐标的， 所有这里用两层for循环，来得到每个粒子的x,y坐标

offsetX，offsetY 横竖每次间隔多少像素才去取数据，这样出来的粒子才会排列不一

基本上拿到粒子之后，然后随机绘制在界面上，详见 randomDraw 方法 然后循环执行 loop 方法，遍历每个粒子，计算位置，设置半径，即可看到效果。

其他的逻辑都是比较简单的，稍微看一下代码就能懂，另外我还加了手动绘制的功能，可以按住鼠标在界面上进行绘制，松开后2s则会展现你绘制的内容，其实这个可以发给你的女朋友，内置比如 I love U 之类的话，让她一打开给她一个惊喜，哈哈，也是不错的哦。