canvas 给其中一个加阴影_H5表白特效——Canvas实现粒子涂鸦效果

最近闲来无事，便去研究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 之类的话，让她一打开给她一个惊喜，哈哈，也是不错的哦。