<!doctype html> <html lang="en"> <head> <meta charset=gbk> <title>粒子效果演示</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> <p id="outer"> <p id="canvascontainer"> <canvas id="maincanvas" width="1000" height="560"></canvas> <p id="output"></p> </p> </p> <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 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 < .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 - 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; })(); </script> </body> </html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue+canvas实现移动端手写板步骤详解
vue裁切预览组件使用详解
以上就是js+html5做出鼠标绑定粒子流动画的详细内容。