这次给大家带来JS+HTML5实绑定鼠标事件的粒子动画，JS+HTML5实绑定鼠标事件粒子动画的注意事项有哪些，下面就是实战案例，一起来看一下。
粒子效果演示 html, body {text-align: center;margin:0;padding:0;background: #000000;color: #666666;line-height: 1.25em;}#outer {position: absolute;top: 50%;left: 50%;width: 1px;height: 1px;overflow: visible;}#canvasContainer {position: absolute;width: 1000px;height: 560px;top: -280px;left: -500px;}canvas {border: 1px solid #333333;}a {color: #00CBCB;text-decoration:none;font-weight:bold;}a:hover {color:#FFFFFF;}#output {font-family: Arial, Helvetica, sans-serif;font-size: 0.75em;margin-top:4px;}#footer{font-size: 0.6em;font-family: Arial, Helvetica, sans-serif;position: absolute;bottombottom:8px;width:98%;}//javascript部分(function(){var PI_2 = Math.PI * 2;var canvasW = 1000;var canvasH = 560;var numMovers = 600;var friction = 0.96;var movers = [];var canvas;var ctx;var canvasp;var outerp;var mouseX;var mouseY;var mouseVX;var mouseVY;var prevMouseX;var prevMouseY;var isMouseDown;function init(){canvas = document.getElementById("mainCanvas");if ( canvas.getContext ){setup();setInterval( run , 33 );trace('你们好');}else{trace("Sorry, needs a recent version of Chrome, Firefox, Opera, Safari, or Internet Explorer 9.");}}function setup(){outerp = document.getElementById("outer");canvasp = document.getElementById("canvasContainer");ctx = canvas.getContext("2d");var i = numMovers;while ( i-- ){var m = new Mover();m.x = canvasW * 0.5;m.y = canvasH * 0.5;m.vX = Math.cos(i) * Math.random() * 34;m.vY = Math.sin(i) * Math.random() * 34;movers[i] = m;}mouseX = prevMouseX = canvasW * 0.5;mouseY = prevMouseY = canvasH * 0.5;document.onmousedown = onDocMouseDown;document.onmouseup = onDocMouseUp;document.onmousemove = onDocMouseMove;}function run(){ctx.globalCompositeOperation = "source-over";ctx.fillStyle = "rgba(8,8,12,0.65)";ctx.fillRect( 0 , 0 , canvasW , canvasH );ctx.globalCompositeOperation = "lighter";mouseVX = mouseX - prevMouseX;mouseVY = mouseY - prevMouseY;prevMouseX = mouseX;prevMouseY = mouseY;var toDist = canvasW * 0.86;var stirDist = canvasW * 0.125;var blowDist = canvasW * 0.5;var Mrnd = Math.random;var Mabs = Math.abs;var i = numMovers;while ( i-- ){var m = movers[i];var x = m.x;var y = m.y;var vX = m.vX;var vY = m.vY;var dX = x - mouseX;var dY = y - mouseY;var d = Math.sqrt( dX * dX + dY * dY ) || 0.001;dX /= d;dY /= d;if ( isMouseDown ){if ( d < blowDist ){var blowAcc = ( 1 - ( d / blowDist ) ) * 14;vX += dX * blowAcc + 0.5 - Mrnd();vY += dY * blowAcc + 0.5 - Mrnd();}}if ( d < toDist ){var toAcc = ( 1 - ( d / toDist ) ) * canvasW * 0.0014;vX -= dX * toAcc;vY -= dY * toAcc;}if ( d < stirDist ){var mAcc = ( 1 - ( d / stirDist ) ) * canvasW * 0.00026;vX += mouseVX * mAcc;vY += mouseVY * mAcc;}vX *= friction;vY *= friction;var avgVX = Mabs( vX );var avgVY = Mabs( vY );var avgV = ( avgVX + avgVY ) * 0.5;if( avgVX < .1 ) vX *= Mrnd() * 3;if( avgVY canvasW ){nextX = canvasW;vX *= -1;}else if ( nextX canvasH ){nextY = canvasH;vY *= -1;}else if ( nextY < 0 ){nextY = 0;vY *= -1;}m.vX = vX;m.vY = vY;m.x = nextX;m.y = nextY;ctx.fillStyle = m.color;ctx.beginPath();ctx.arc( nextX , nextY , sc , 0 , PI_2 , true );ctx.closePath();ctx.fill();}}function onDocMouseMove( e ){var ev = e ? e : window.event;mouseX = ev.clientX - outerp.offsetLeft - canvasp.offsetLeft;mouseY = ev.clientY - outerp.offsetTop - canvasp.offsetTop;}function onDocMouseDown( e ){isMouseDown = true;return false;}function onDocMouseUp( e ){isMouseDown = false;return false;}function Mover(){this.color = "rgb(" + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + ")";this.y = 0;this.x = 0;this.vX = 0;this.vY = 0;this.size = 1;}function rect( context , x , y , w , h ){context.beginPath();context.rect( x , y , w , h );context.closePath();context.fill();}function trace( str ){document.getElementById("output").innerHTML = str;}window.onload = init;})();
登录后复制
这里使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JS实现雪花飘落动画步骤详解
怎样使用Vue+canvas实现移动端手写板功能
以上就是JS+HTML5实绑定鼠标事件的粒子动画的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2752072.html
