<style>
* { margin:0; padding:0; }
html, body { width:100vw; height:100vh; overflow:hidden;} /* just to be sure these are full screen*/
canvas {
overflow: hidden;
width:100vw;
height:100vh;
background-color:black;
}</style>
</head>
<body>
<canvas id="test"></canvas>
<script>
var w = window.innerWidth,
h = window.innerHeight,
canvas = document.getElementById('test'),
ctx = canvas.getContext('2d'),
rate = 60,
arc = 100,
time,
count,
size = 7,
speed = 20,
parts = new Array,
colors = ['red','#f57900','yellow','#ce5c00','#5c3566'];
var mouse = { x: 0, y: 0 };
canvas.setAttribute('width',w);
canvas.setAttribute('height',h);
function create() {
time = 0;
count = 0;
for(var i = 0; i < arc; i++) {
parts[i] = {
x: Math.ceil(Math.random() * w),
y: Math.ceil(Math.random() * h),
toX: Math.random() * 5 - 1,
toY: Math.random() * 2 - 1,
c: colors[Math.floor(Math.random()*colors.length)],
size: Math.random() * size
}
}
}
function particles() {
ctx.clearRect(0,0,w,h);
canvas.addEventListener('mousemove', MouseMove, false);
for(var i = 0; i < arc; i++) {
var li = parts[i];
var distanceFactor = DistanceBetween( mouse, parts[i] );
var distanceFactor = Math.max( Math.min( 15 - ( distanceFactor / 10 ), 10 ), 1 );
ctx.beginPath();
ctx.arc(li.x,li.y,li.size*distanceFactor,0,Math.PI*2,false);
ctx.fillStyle = li.c;
ctx.strokeStyle=li.c;
if(i%2==0)
ctx.stroke();
else
ctx.fill();
li.x = li.x + li.toX * (time * 0.05);
li.y = li.y + li.toY * (time * 0.05);
if(li.x > w){
li.x = 0;
}
if(li.y > h) {
li.y = 0;
}
if(li.x < 0) {
li.x = w;
}
if(li.y < 0) {
li.y = h;
}
}
if(time < speed) {
time++;
}
setTimeout(particles,1000/rate);
}
function MouseMove(e) {
mouse.x = e.layerX;
mouse.y = e.layerY;
//context.fillRect(e.layerX, e.layerY, 5, 5);
//Draw( e.layerX, e.layerY );
}
function DistanceBetween(p1,p2) {
var dx = p2.x-p1.x;
var dy = p2.y-p1.y;
return Math.sqrt(dx*dx + dy*dy);
}
create();
particles();</script>
本贴最后更新于 2023 天前，其中的信息可能已经事过境迁
-
前端
247 引用 • 1347 回帖
前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于