当鼠标接近粒子时，该粒子变红。实现原理很简单。鼠标移动时，通过isPointInPath(x,y)方法检测，有哪些粒子处于当前指针范围内。如果处于，绘制1像素的红色矩形即可
<canvas></canvas> <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); 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); //鼠标移动时，当粒子距离鼠标指针小于10时，则进行相关操作 drawing1.onmousemove = function(e){ e = e || event; var x = e.clientX - drawing1.getBoundingClientRect().left; var y = e.clientY - drawing1.getBoundingClientRect().top; cxt.beginPath(); cxt.arc(x,y,10,0,Math.PI*2); for(var i = 0; i < dataArr.length; i++){ var temp = dataArr[i]; if(cxt.isPointInPath(temp.x,temp.y)){ cxt.fillStyle = 'red'; cxt.fillRect(temp.x,temp.y,1,1); } } } } </script>
【远离鼠标】
鼠标点击时，以鼠标指针为圆心的一定范围内的粒子需要移动到该范围以外。一段时间后，粒子回到原始位置
实现原理并不复杂，使用isPointInPath(x,y)方法即可，如果粒子处于当前路径中，则沿着鼠标指针与粒子坐标组成的直线方向，移动到路径的边缘
<canvas></canvas> <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, 'mark':false } } } } //筛选粒子，仅保存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,2,1); //将筛选后的粒子信息保存到新建的imageData中 var oNewImage = cxt.createImageData(W,H); for(var i = 0; i < dataArr.length; i++){ for(var j = 0; j < 4; j++){ oNewImage.data[dataArr[i].red+j] = imageData.data[dataArr[i].red+j]; } } //写入canvas中 cxt.putImageData(oNewImage,0,0); //设置鼠标检测半径为r var r = 20; //鼠标移动时，当粒子距离鼠标指针小于20时，则进行相关操作 drawing1.onmousedown = function(e){ e = e || event; var x = e.clientX - drawing1.getBoundingClientRect().left; var y = e.clientY - drawing1.getBoundingClientRect().top; cxt.beginPath(); cxt.arc(x,y,r,0,Math.PI*2); for(var i = 0; i < dataArr.length; i++){ var temp = dataArr[i]; if(cxt.isPointInPath(temp.x,temp.y)){ temp.mark = true; var angle = Math.atan2((temp.y - y),(temp.x - x)); temp.endX = x - r*Math.cos(angle); temp.endY = y - r*Math.sin(angle); var disX = temp.x - temp.endX; var disY = temp.y - temp.endY; cxt.fillStyle = '#fff'; cxt.fillRect(temp.x,temp.y,1,1); cxt.fillStyle = '#000'; cxt.fillRect(temp.endX,temp.endY,1,1); dataRecovery(10); }else{ temp.mark = false; } } var oTimer = null; function dataRecovery(n){ clearTimeout(oTimer); oTimer = setTimeout(function(){ cxt.clearRect(0,0,W,H); for(var i = 0; i < dataArr.length; i++){ var temp = dataArr[i]; if(temp.mark){ var x0 = temp.endX; var y0 = temp.endY; var disX = temp.x - x0; var disY = temp.y - y0; cxt.fillRect(x0 + disX/n,y0 + disY/n,1,1); }else{ cxt.fillRect(temp.x,temp.y,1,1); } } dataRecovery(n-1); if(n === 1){ clearTimeout(oTimer); } },17); } } } </script>
综合实例
下面将上面的效果制作为一个可编辑的综合实例