原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果

2019-11-19 13:55:37

字体：大中小

来源：转载

供稿：网友

本文实例讲述了原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html lang="en"><head><meta charset=gbk><title>www.VeVB.COm 粒子效果演示</title><meta name="description" content="HTML5/canvas demo, 500 particles to play around with." /><meta name="keywords" content="html5,canvas,javascript,particles,interactive,velocity,programming,flash" /><style type="text/css">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%;}</style></head><body><div id="outer"><div id="canvasContainer"><canvas id="mainCanvas" width="1000" height="560"></canvas><div id="output"></div></div></div><script type="text/javascript">//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 canvasDiv;var outerDiv;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(){outerDiv = document.getElementById("outer");canvasDiv = 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 < .1 ) vY *= Mrnd() * 3;var sc = avgV * 0.45;sc = Math.max( Math.min( sc , 3.5 ) , 0.4 );var nextX = x + vX;var nextY = y + vY;if ( nextX > canvasW ){nextX = canvasW;vX *= -1;}else if ( nextX < 0 ){nextX = 0;vX *= -1;}if ( nextY > 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 - outerDiv.offsetLeft - canvasDiv.offsetLeft;mouseY = ev.clientY - outerDiv.offsetTop - canvasDiv.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;})();</script></body></html>

这里使用本站HTML/CSS/JS在线运行测试工具：http://tools.VeVB.COm/code/HtmlJsRun，可得到如下测试运行效果：