原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
程序员文章站
2022-06-25 08:30:17
本文实例讲述了原生js+html5实现跟随鼠标一起流动的粒子动画效果。分享给大家供大家参考，具体如下：
本文实例讲述了原生js+html5实现跟随鼠标一起流动的粒子动画效果。分享给大家供大家参考，具体如下：
<!doctype html>
<html lang="en">
<head>
<meta charset=gbk>
<title>www.jb51.net 粒子效果演示</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.jb51.net/code/htmljsrun，可得到如下测试运行效果：
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript+html5特效与技巧汇总》、《javascript图片操作技巧大全》、《javascript图形绘制技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇： zabbix监控历史数据清理
下一篇： 老师听善良，换我就伪装客户，看看他是谁