网页的粒子效果

超、凢脫俗 2021-09-14 15:00 511阅读 0赞

之前在浏览博客的时候，发现了粒子效果，现在图如下：![SouthEast][]

现把代码贴出来，供大家参考：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title></title>  
<style>  
\*\{margin:0;padding:0;\}  
html,body\{width:100%:height:100%;overflow:hidden;\}  
</style>  
</head>  
<body>  
<canvas width="1280" height="910" id="c1"></canvas>  
<script src="../jQuery/jquery-1.11.0.js"></script>  
<script>  
var body = document.body;  
var oC = document.getElementById("c1");  
var c = oC.getContext("2d");  
var arr = \[\];  
var count = 300;  
var mouse = \{\};  
document.onmousemove = function(evt)\{  
var e = evt || window.event;  
mouse = \{  
xx : e.clientX,  
yy : e.clientY  
\}  
\}  
document.onmouseleave = function()\{  
                mouse = undefined;  
            \}  
document.oncontextmenu = function()\{  
return false;  
\}  
function ty()\{  
c.clearRect(0,0,oC.width,oC.height);  
for(var i = 0;i < count;i++)\{  
if(arr.length != count)\{  
p = \{  
x : Math.floor(Math.random() \* body.clientWidth),  
y : Math.floor(Math.random() \* body.clientHeight),  
vx : 1 - Math.random() \* 2,  
vy : 1 - Math.random() \* 2,  
num:0  
\}  
\}else\{  
p = hua(arr\[i\]);  
\}  
c.fillStyle = "deepskyblue";  
c.fillRect(p.x,p.y,2,2);  
arr\[i\] = p;  
\}  
jiance(mouse);  
\}  
setInterval(function()\{  
ty();  
\},20)  
function hua(p)\{  
var a = p;  
if(p.x <= 0 || p.x >= oC.width)\{  
a.vx = -p.vx;  
a.x += a.vx;  
\}else if(p.y <= 0 || p.y >= oC.height)\{  
a.vy = -a.vy;  
a.y += a.vy;  
\}else\{  
a = \{  
x:a.x + a.vx,  
y:a.y + a.vy,  
vx:a.vx,  
vy:a.vy,  
num:0  
\}  
\}  
return a;  
\}  
function jiance(mouse)\{  
for(var i = 0;i < arr.length;i++)\{  
for(var j = 0;j < arr.length;j++)\{  
if(i != j)\{  
var len = Math.round(arr\[i\].x - arr\[j\].x) \* Math.round(arr\[i\].x - arr\[j\].x) + Math.round(arr\[i\].y - arr\[j\].y) \* Math.round(arr\[i\].y - arr\[j\].y)  
if(len <= 5000 && arr\[i\].num < 6)\{  
arr\[i\].num++;  
c.lineWidth = 0.5 - len / 2000;  
c.beginPath();  
c.strokeStyle = "lime";  
c.moveTo(arr\[i\].x + 2,arr\[i\].y + 2);  
c.lineTo(arr\[j\].x,arr\[j\].y);  
c.stroke();  
\}  
\}  
\}  
if(mouse)\{  
var leng = Math.round(arr\[i\].x - mouse.xx)\*Math.round(arr\[i\].x - mouse.xx)+Math.round(arr\[i\].y - mouse.yy)\*Math.round(arr\[i\].y - mouse.yy);  
if(leng > 5000 && leng <= 20000)\{  
arr\[i\].x = arr\[i\].x + (mouse.xx - arr\[i\].x) / 20;  
arr\[i\].y = arr\[i\].y + (mouse.yy - arr\[i\].y) / 20;  
\}  
if(leng <= 20000)\{  
c.lineWidth = 1;  
c.strokeStyle = "yellow";  
c.beginPath();  
c.moveTo(arr\[i\].x,arr\[i\].y);  
c.lineTo(mouse.xx,mouse.yy);  
c.stroke();  
\}  
\}  
\}  
\}  
</script>  
</body>  
</html>

[SouthEast]: /images/20210813/0e339d80a9454618b77c3839e74ef5ef.png