2025新年爱心代码
时间: 2024-12-31 11:44:49 浏览: 7
### 实现2025新年爱心图案代码
为了创建一个展示2025新年爱心图案的效果,可以从已有设计思路出发并加以扩展。以下是基于给定描述构建的一个HTML/JavaScript版本的心形粒子动画示例[^1]:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Happy New Year 2025</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="heartCanvas"></canvas>
<script>
const canvas = document.getElementById('heartCanvas');
const ctx = canvas.getContext('2d');
// 设置画布大小适应窗口尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particles = [];
const particleCount = 300; // 粒子数量
const text = "Happy New Year 2025"; // 文字内容
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = Math.random() * 2 + 1;
this.speedX = (Math.random() - 0.5) * 2;
this.speedY = (Math.random() - 0.5) * 2;
this.color = 'red'; // 默认红色
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.2) this.size -= 0.1;
// 当粒子消失后重新初始化位置和速度
if(this.x < 0 || this.x > innerWidth ||
this.y < 0 || this.y > innerHeight){
this.init();
}
}
init(){
const angle = Math.atan2(mouse.y-this.y,mouse.x-this.x);
this.x = mouse.x + Math.cos(angle)*70;
this.y = mouse.y + Math.sin(angle)*70;
this.size = Math.random()*4+2;
this.speedX=(Math.random()-0.5)*(mouse.x-this.x)/innerWidth*2;
this.speedY=(Math.random()-0.5)*(mouse.y-this.y)/innerHeight*2;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
}
}
function animateHeartParticles() {
requestAnimationFrame(animateHeartParticles);
ctx.clearRect(0, 0, innerWidth, innerHeight);
for(let i=0;i<particleCount;i++){
particles[i].update();
particles[i].draw();
}
// 绘制文字
ctx.font='bold 4em Arial';
ctx.textAlign='center';
ctx.fillText(text, innerWidth / 2, innerHeight / 2);
}
for(let i=0;i<particleCount;i++)particles.push(new Particle(Math.random()*innerWidth,Math.random()*innerHeight));
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
animateHeartParticles();
// 鼠标交互逻辑简化处理
const mouse={x:null,y:null};
window.addEventListener('mousemove',(e)=>{
mouse.x=e.clientX;
mouse.y=e.clientY;
});
</script>
</body>
</html>
```
此代码实现了带有动态粒子效果的心形图形,并在中心展示了“Happy New Year 2025”的字样。通过调整`Particle`类中的属性以及CSS样式,可以轻松更改粒子的颜色、形状和其他视觉特性。
阅读全文