网页的粒子效果

最新推荐文章于 2023-07-30 01:16:53 发布

qq_39985511

最新推荐文章于 2023-07-30 01:16:53 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript 文章标签：粒子效果特效 js

本文链接：https://blog.csdn.net/qq_39985511/article/details/79137834

版权

JavaScript 专栏收录该内容

44 篇文章 2 订阅

订阅专栏

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

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

<!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>

qq_39985511

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
网页的粒子效果

之前在浏览博客的时候，发现了粒子效果，现在图如下：现把代码贴出来，供大家参考：*{margin:0;padding:0;}html,body{width:100%:height:100%;overflow:hidden;}var body = document.body;var oC = document.getElementBy
复制链接

扫一扫