このチュートリアルでは、HTML、CSS、JavaScript を使用して、2023 年を祝う花火の豪華なアニメーションを作成します。また、動的に変化する色のテキストと著作権情報バーも追加します。
レンダリング
まず、HTML から始めます。
HTML は Web ページの骨格であり、そこにキャンバス、テキスト、著作権情報フィールドを配置します。HTML コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>2023年烟花动画</title>
<link rel="stylesheet" type="text/css" href="./css/fireworks.css">
<style>
/* 修改背景色 */
body {
background-color: #000;
}
/* 修改字体 */
.center-text {
font-family: 'Courier New', Courier, monospace;
font-size: 4em;
color: white;
text-shadow: 3px 3px 5px rgba(255, 255, 255, 0.3);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: white;
background-color: rgba(0, 0, 0, 0.6); /* 半透明背景 */
padding: 10px;
font-size: 1em;
animation: fadeInOut 5s infinite; /* CSS 动画 */
font-family: 'Courier New', Courier, monospace; /* 修改字体 */
}
/* CSS 动画的关键帧 */
@keyframes fadeInOut {
0% {
opacity: 1;}
50% {
opacity: 0.5;}
100% {
opacity: 1;}
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="center-text">
<span class="red">2</span>
<span class="orange">0</span>
<span class="yellow">2</span>
<span class="green">3</span>
</div>
<!-- 在这里添加版权声明 -->
<div class="footer">
苏呆仔专享权限
</div>
<script src="./js/fireworks.js"></script>
</body>
</html>
この HTML ファイルでは、黒の背景、動的な「2023」のテキスト、および著作権表示の列を作成しました。
次に、CSS に入ります。
CSS は Web ページの美化レイヤーであり、Web ページのスタイルを定義します。CSS コードは次のとおりです。
body, canvas {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
background: #000;
}
.center-text {
position: absolute;
top: 50%;
left: 50%;
font-size: 5em;
transform: translate(-50%, -50%);
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
animation: colorChange 5s infinite;
}
@keyframes colorChange {
0% {
color: red; }
20% {
color: orange; }
40% {
color: yellow; }
60% {
color: green; }
80% {
color: blue; }
100% {
color: purple; }
}
.red {
color: red;
animation: colorChangeRed 5s infinite;
}
.orange {
color: orange;
animation: colorChangeOrange 5s infinite;
}
.yellow {
color: yellow;
animation: colorChangeYellow 5s infinite;
}
.green {
color: green;
animation: colorChangeGreen 5s infinite;
}
@keyframes colorChangeRed {
0% {
color: red; }
25% {
color: orange; }
50% {
color: yellow; }
75% {
color: green; }
100% {
color: blue; }
}
@keyframes colorChangeOrange {
0% {
color: orange; }
25% {
color: yellow; }
50% {
color: green; }
75% {
color: blue; }
100% {
color: purple; }
}
@keyframes colorChangeYellow {
0% {
color: yellow; }
25% {
color: green; }
50% {
color: blue; }
75% {
color: purple; }
100% {
color: red; }
}
@keyframes colorChangeGreen {
0% {
color: green; }
25% {
color: blue; }
50% {
color: purple; }
75% {
color: red; }
100% {
color: orange; }
}
この CSS ファイルでは、主に「2023」というテキストのスタイルとアニメーション、および著作権表示欄のスタイルを定義します。
最後に、JavaScript について説明します。
JavaScript は Web ページの動作層であり、Web ページの動的な効果を定義します。JavaScript コードは次のとおりです。
// 所有烟花的数组
var fireworks = [];
// 烟花的构造函数
function Firework(sx, sy, tx, ty) {
this.x = sx;
this.y = sy;
this.vx = tx ? ((tx - sx) / 100) : 0;
this.vy = ty ? ((ty - sy) / 100) : Math.random() * (-5);
this.alpha = 1; // alpha通道，用于实现烟花消失的效果
this.color = "hsl(" + (Math.random() * 360) + ", 100%, 50%)"; // 色彩随机
}
// 烟花的绘制方法
Firework.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.globalAlpha = this.alpha; // 设置alpha通道
ctx.fill();
};
// 获取画布
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 设置画布的尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 监听鼠标移动事件
window.onmousemove = function (e) {
// 创建一个新的烟花并添加到数组中
var f = new Firework(e.clientX, e.clientY, null, null);
fireworks.push(f);
};
// 监听鼠标离开窗口的事件
window.onmouseout = function () {
var f = new Firework(Math.random() * window.innerWidth, window.innerHeight, null, null);
fireworks.push(f);
};
// 动画循环
function loop() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = 1; // 恢复全局alpha
// 绘制所有的烟花，并更新位置
for (var i = 0; i < fireworks.length; i++) {
fireworks[i].x += fireworks[i].vx;
fireworks[i].y += fireworks[i].vy;
fireworks[i].vy += 0.01; // 加速度，模拟重力
fireworks[i].alpha -= 0.01; // alpha递减，烟花逐渐消失
// 如果烟花完全消失了，就从数组中删除
if (fireworks[i].alpha <= 0) {
fireworks.splice(i, 1);
continue;
}
fireworks[i].draw(ctx);
}
// 通过requestAnimationFrame来进行动画循环
requestAnimationFrame(loop);
}
// 开始动画循环
loop();
// 每隔一段时间在底部随机位置创建烟花
setInterval(function () {
// 每次创建5个烟花
for(var i = 0; i < 5; i++){
var f = new Firework(Math.random() * window.innerWidth, window.innerHeight, null, null);
fireworks.push(f);
}
}, 500); // 修改为每半秒创建一次烟花
この JavaScript ファイルは主に、花火の生成、移動、消滅などの花火の動作とアニメーション、およびマウスが移動したりウィンドウから離れたときに花火を生成するロジックを定義します。