❤️创意网页：HTML5,canvas创作科技感粒子特效（科技感粒子、js鼠标跟随、粒子连线）
以下是一个使用HTML5和canvas创建的科技感的粒子效果示例，其中的粒子会跟随鼠标移动：
<!DOCTYPE html>
<html>
<head>
<title>创意网页: HTML5 Canvas创造科技感粒子特效</title>
<style>
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="particles-canvas"></canvas>
<script>
const canvas = document.getElementById('particles-canvas');
const ctx = canvas.getContext('2d');
const mouse = {x: 0, y: 0};
let particles = [];
// 鼠标跟随的粒子
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = (Math.random() - 0.5) * 2;
this.vy = (Math.random() - 0.5) * 2;
this.radius = Math.random() * 1.5;
this.life = 1;
}
update() {
this.x += this.vx;
this.y += this.vy;
this.life -= 0.001;
}
draw() {
ctx.beginPath();
ctx.globalAlpha = this.life;
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = '#fff';
ctx.fill();
}
}
// 鼠标跟随函数
function followMouse(event) {
mouse.x = event.clientX;
mouse.y = event.clientY;
}
// 初始化和动画循环
function init() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener('mousemove', followMouse);
setInterval(update, 16);
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles = particles.filter(particle => particle.life > 0);
while (particles.length < 100) {
particles.push(new Particle(mouse.x, mouse.y));
}
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
}
}
init();
</script>
</body>
</html>这段代码定义了一个Particle类，它表示跟随鼠标移动的粒子。有一个particles数组跟踪这些粒子，并且每个粒子都有随机生
评论已关闭