粒子爱心代码复制粘贴教程
时间: 2024-09-27 09:00:55 浏览: 36
粒子爱心是一种常见的HTML5 Canvas动画效果,通过绘制一系列的小圆形来形成动态的心形图案。下面是一个简单的JavaScript和HTML的示例代码,用于创建基本的粒子爱心动画:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
canvas {
border: 1px solid black;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<canvas id="particle-canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('particle-canvas');
var ctx = canvas.getContext('2d');
function Particle(x, y) {
this.x = x;
this.y = y;
this.size = Math.random() * 8 + 6; // 随机大小
this.speed = Math.random() * 2 - 1; // 随机速度
}
Particle.prototype.update = function() {
this.y += this.speed;
if (this.y > canvas.height || this.y < 0) {
this.speed *= -1;
}
};
Particle.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI*2);
ctx.fillStyle = 'red'; // 可以设置颜色
ctx.fill();
};
var particles = [];
for (var i = 0; i < 50; i++) {
particles.push(new Particle(Math.random() * canvas.width, canvas.height / 2));
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
for (var j = particles.length - 1; j >= 0; j--) {
particles[j].update();
particles[j].draw();
}
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
```
阅读全文