粒子动画并不是粒子在做动画，而是通过getImageData()方法获得粒子的随机坐标和最终坐标后，通过fillRect()方法绘制的小方块在做运动。使用定时器，不断的绘制坐标变化的小方块，以此来产生运动的效果
【随机位置】
<canvas></canvas> <button>开始显字</button> <button>重新混乱</button> <script> var drawing1 = document.getElementById('drawing1'); if(drawing1.getContext){ var cxt = drawing1.getContext('2d'); var W = drawing1.width = 200; var H = drawing1.height = 200; var str = '小火柴'; cxt.textBaseline = 'top'; var sh = 60; cxt.font = sh + 'px 宋体' var sw = cxt.measureText(str).width; if(sw > W){ sw = W; } cxt.fillText(str,(W - sw)/2,(H - sh)/2,W); //获取imageData var imageData = cxt.getImageData(0,0,W,H); cxt.clearRect(0,0,W,H); function setData(imageData,n,m){ //从imageData对象中取得粒子，并存储到dots数组中 var dots = []; //dots的索引 var index = 0; for(var i = 0; i < W; i+=n){ for(var j = 0; j < H ;j+=n){ //data值中的红色值 var k = 4*(i + j*W); //data值中的透明度 if(imageData.data[k+3] > 0){ //将透明度大于0的data中的红色值保存到dots数组中 dots.push(k); dots[index++] = { 'index':index, 'x':i, 'y':j, 'red':k, 'randomX':Math.random()*W, 'randomY':Math.random()*H, } } } } //筛选粒子，仅保存dots.length/m个到newDots数组中 var newDots = []; var len = Math.floor(dots.length/m); for(var i = 0; i < len; i++){ newDots.push(dots.splice(Math.floor(Math.random()*dots.length),1)[0]); } return newDots; } //获得粒子数组 var dataArr = setData(imageData,1,1); var oTimer1 = null; var oTimer2 = null; btn1.onclick = function(){ clearTimeout(oTimer1); showData(10); } btn2.onclick = function(){ clearTimeout(oTimer2); showRandom(10); } function showData(n){ oTimer1 = setTimeout(function(){ cxt.clearRect(0,0,W,H); for(var i = 0; i < dataArr.length; i++){ var temp = dataArr[i]; var x0 = temp.randomX; var y0 = temp.randomY; var disX = temp.x - temp.randomX; var disY = temp.y - temp.randomY; cxt.fillRect(x0 + disX/n,y0 + disY/n,1,1); } showData(n-1); if(n === 1){ clearTimeout(oTimer1); } },60); } function showRandom(n){ oTimer2 = setTimeout(function fn(){ cxt.clearRect(0,0,W,H); for(var i = 0; i < dataArr.length; i++){ var temp = dataArr[i]; var x0 = temp.x; var y0 = temp.y; var disX = temp.randomX - temp.x; var disY = temp.randomY - temp.y; cxt.fillRect(x0 + disX/n,y0 + disY/n,1,1); } showRandom(n-1); if(n === 1){ clearTimeout(oTimer2); } },60); } } </script>
【飘入效果】
飘入效果与随机显字的原理相似，不再赘述
<canvas></canvas> <button>左上角飘入</button> <script> var drawing1 = document.getElementById('drawing1'); if(drawing1.getContext){ var cxt = drawing1.getContext('2d'); var W = drawing1.width = 200; var H = drawing1.height = 200; var str = '小火柴'; cxt.textBaseline = 'top'; var sh = 60; cxt.font = sh + 'px 宋体' var sw = cxt.measureText(str).width; if(sw > W){ sw = W; } cxt.fillText(str,(W - sw)/2,(H - sh)/2,W); //获取imageData var imageData = cxt.getImageData(0,0,W,H); cxt.clearRect(0,0,W,H); function setData(imageData,n,m){ //从imageData对象中取得粒子，并存储到dots数组中 var dots = []; //dots的索引 var index = 0; for(var i = 0; i < W; i+=n){ for(var j = 0; j < H ;j+=n){ //data值中的红色值 var k = 4*(i + j*W); //data值中的透明度 if(imageData.data[k+3] > 0){ //将透明度大于0的data中的红色值保存到dots数组中 dots.push(k); dots[index++] = { 'index':index, 'x':i, 'y':j, 'red':k, 'randomX':Math.random()*W, 'randomY':Math.random()*H, } } } } //筛选粒子，仅保存dots.length/m个到newDots数组中 var newDots = []; var len = Math.floor(dots.length/m); for(var i = 0; i < len; i++){ newDots.push(dots.splice(Math.floor(Math.random()*dots.length),1)[0]); } return newDots; } //获得粒子数组 var dataArr = setData(imageData,1,1); var oTimer1 = null; btn1.onclick = function(){ clearTimeout(oTimer1); showData(10); } function showData(n){ oTimer1 = setTimeout(function(){ cxt.clearRect(0,0,W,H); for(var i = 0; i < dataArr.length; i++){ var temp = dataArr[i]; var x0 = 0; var y0 = 0; var disX = temp.x - 0; var disY = temp.y - 0; cxt.fillRect(x0 + disX/n,y0 + disY/n,1,1); } showData(n-1); if(n === 1){ clearTimeout(oTimer1); } },60); } } </script>
鼠标交互
一般地，粒子的鼠标交互都与isPointInPath(x,y)方法有关
【移入变色】