HTML5和JS实现新年礼花效果
以下是一个简单的HTML和JavaScript代码示例,用于创建新年祝福祝福彩花效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Celebration</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// 获取canvas元素并设置绘图上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 窗口大小改变时更新canvas尺寸
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// 初始化时设置canvas尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 定义Particle类
class Particle {
constructor(x, y, dx, dy, radius, color) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.color = color;
this.alpha = 1;
this.decreaseAlpha = true;
}
draw() {
ctx.fillStyle = this.color;
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fill();
if (this.decreaseAlpha && this.alpha < 0.05) {
this.alpha = 1;
this.decreaseAlpha = false;
} else if (!this.decreaseAlpha && this.alpha > 0) {
this.alpha -= 0.01;
} else {
this.decreaseAlpha = true;
}
}
update() {
this.x += this.dx;
this.y += this.dy;
this.draw();
}
}
// 创建Particle数组
const particles = [];
// 创建新年祝福的文字
const newYearWish = '新年快乐';
const fontSize = 20;
const textWidth = ctx.measureText(newYearWish).width;
const textX = (canvas.width - textWidth) / 2;
const textY = canvas.height / 2;
// 绘制文字
ctx.font = `${fontSize}px Arial`;
ctx.fillStyle = 'white';
ctx.textAlign = 'center';
ctx.fillText(newYearWish, textX, textY);
// 创建绽放的花瓣
for (let i = 0; i < 100; i++) {
const radius = Math.random() * 2 + 1;
const x = textX + Math.random() * textWidth - radius;
const y = textY + Math.random() * fontSize;
const dx = (Math.random() - 0.5) * 1.5;
const dy = (Math.random() - 0.5) * 1.5 + 2;
const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
particles.push(new Particle(x, y, dx, dy, radius, color));
}
// 动画循环
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.fil
评论已关闭