【canvas】前端创造的图片粒子动画效果：HTML5 Canvas 技术详解
<!DOCTYPE html>
<html>
<head>
<title>Canvas 粒子动画</title>
<style>
canvas {
background-color: #000;
}
</style>
</head>
<body>
<canvas id="particles-canvas"></canvas>
<script>
const canvas = document.getElementById('particles-canvas');
const ctx = canvas.getContext('2d');
const width = window.innerWidth;
const height = window.innerHeight;
canvas.width = width;
canvas.height = height;
const particleCount = 200;
const particles = [];
const mouse = {x: width / 2, y: height / 2};
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.2;
this.life = 1;
}
update() {
this.x += this.vx;
this.y += this.vy;
this.life -= 0.0005;
}
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 init() {
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle(mouse.x, mouse.y));
}
animate();
}
function animate() {
ctx.clearRect(0, 0, width, height);
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
}
requestAnimationFrame(animate);
}
// 监听鼠标移动事件
window.onmousemove = (e) => {
mouse.x = e.clientX;
mouse.y = e.clientY;
};
init();
</script>
</body>
</html>这段代码创造了一个简单的鼠标跟随的粒子动画效果。通过更改particleCount的值可以控制粒子的数量，通过调整Particle类中的this.vx和this.vy的值可以改变粒子的移动速度和方向。通过这个例子，开发者可以学习到如何使用Canvas API创建基本的动画效果，并且可以通过调整参数来实现不同的视觉效果。
评论已关闭