假期到了，還有什麼比用 JavaScript 創(chuàng)建動(dòng)態(tài)聖誕場(chǎng)景更好的方式來傳播歡樂呢？在本教程中，我們將引導(dǎo)您建立令人驚嘆的節(jié)日主題動(dòng)畫，其中包括飄落的雪花、喜慶的聖誕小鎮(zhèn)和駕著雪橇飛行的聖誕老人。
？現(xiàn)場(chǎng)示範(fàn) https://codepen.io/HanGPIIIErr/pen/LEPVwjp
？你將創(chuàng)造什麼
動(dòng)畫雪花優(yōu)雅飄落。
充滿節(jié)慶氣氛的節(jié)慶聖誕小鎮(zhèn)。
聖誕老人駕著雪橇，以逼真的擺動(dòng)動(dòng)作飛過夜空。
該專案使用 HTML、CSS 和 JavaScript（Canvas API），非常適合初學(xué)者和經(jīng)驗(yàn)豐富的開發(fā)人員。
- 設(shè)定 HTML
我們將從一個(gè)簡(jiǎn)單的 HTML 結(jié)構(gòu)開始：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Christmas Wonderland</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Add the CSS styles here */
</style>
</head>
<body>
<canvas>
<ol>
<li>Styling the Scene with CSS</li>
</ol>
<p>We use CSS to create the visual layers of the scene:</p>
<p>A gradient background to simulate the night sky.<br>
A city banner showcasing a cozy Christmas town.<br>
Layers for snow and Santa's animation.<br>
</p>
<pre class="brush:php;toolbar:false">body {
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #1e3b70, #29578a, #3a75b6, #a0d3e8);
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
/* Canvas for the snow and Santa */
#skyCanvas {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
/* Section for the Christmas town */
#christmasScene {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: center;
}
/* City banner */
#cityBanner {
width: 100%;
height: 100%;
background: url('https://i.ibb.co/0p0Wzrk/DALL-E-2024-12-02-23-27.png') no-repeat center center;
background-size: cover;
background-position: bottom;
}
- 用 JavaScript 加入魔法
使用 Canvas API，我們將透過以下方式讓場(chǎng)景變得栩栩如生：
以不同的尺寸、速度和動(dòng)作製作雪花動(dòng)畫。
讓聖誕老人以平滑的振盪軌跡飛過天空。
const canvas = document.getElementById('skyCanvas');
const ctx = canvas.getContext('2d');
let width, height;
let snowflakes = [];
let santa = {
x: width,
y: height * 0.1,
width: 150,
height: 80,
image: new Image(),
time: 0
};
// Load Santa's image
santa.image.src = 'https://i.ibb.co/rbHJDQB/DALL-E-2024-12-02-23-37-removebg-preview.png';
function init() {
resize();
createSnowflakes();
animate();
}
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
santa.x = width;
santa.y = height * 0.1;
}
window.addEventListener('resize', resize);
function createSnowflakes() {
let count = width / 8;
snowflakes = [];
for (let i = 0; i < count; i++) {
snowflakes.push(new Snowflake());
}
}
function Snowflake() {
this.x = Math.random() * width;
this.y = Math.random() * height;
this.radius = Math.random() * 4 + 1;
this.speedX = Math.random() * 1 - 0.5;
this.speedY = Math.random() * 3 + 1;
this.opacity = Math.random() * 0.5 + 0.3;
this.swing = Math.random() * 2;
this.swingSpeed = Math.random() * 0.05 + 0.02;
this.angle = Math.random() * Math.PI * 2;
}
Snowflake.prototype.update = function () {
this.angle += this.swingSpeed;
this.x += Math.cos(this.angle) * this.swing + this.speedX;
this.y += this.speedY;
if (this.y > height) {
this.y = 0;
this.x = Math.random() * width;
}
if (this.x > width) {
this.x = 0;
}
if (this.x < 0) {
this.x = width;
}
};
Snowflake.prototype.draw = function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
let gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius * 2);
gradient.addColorStop(0, 'rgba(255, 255, 255,' + this.opacity + ')');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = gradient;
ctx.fill();
};
function updateSanta() {
santa.time += 0.05;
santa.x -= 3;
santa.y = height * 0.1 + Math.sin(santa.time) * 50;
if (santa.x + santa.width < 0) {
santa.x = width;
}
}
function drawSanta() {
ctx.drawImage(santa.image, santa.x, santa.y, santa.width, santa.height);
}
function animate() {
ctx.clearRect(0, 0, width, height);
snowflakes.forEach((flake) => {
flake.update();
flake.draw();
});
updateSanta();
drawSanta();
requestAnimationFrame(animate);
}
init();
- 查看實(shí)際操作
查看該專案的即時(shí)版本：
？ https://codepen.io/HanGPIIIErr/pen/LEPVwjp
結(jié)論
這個(gè)節(jié)日專案展示了 Canvas API 創(chuàng)建互動(dòng)式動(dòng)畫的強(qiáng)大功能。無論您是慶祝節(jié)日還是學(xué)習(xí)動(dòng)畫技術(shù)，這個(gè)項(xiàng)目都是練習(xí)和提高編碼技能的有趣方式。
請(qǐng)隨意分叉 CodePen 並進(jìn)一步自訂場(chǎng)景，使其成為您自己的場(chǎng)景。節(jié)日快樂！ ??
以上是如何使用 JavaScript 創(chuàng)建帶有動(dòng)畫雪花和聖誕老人的神奇聖誕場(chǎng)景的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！