HTML5落葉動(dòng)畫源代碼
HTML5應(yīng)用程序常常需要各種動(dòng)畫效果來增強(qiáng)用戶體驗(yàn)。其中落葉動(dòng)畫是一種非常受歡迎的選項(xiàng)，可以為你的網(wǎng)站或應(yīng)用程序帶來生氣和動(dòng)態(tài)感。下面是一個(gè)基本的HTML5落葉動(dòng)畫源代碼示例，可以輕松地添加到現(xiàn)有網(wǎng)站或應(yīng)用程序中。
HTML5落葉動(dòng)畫源代碼示例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 設(shè)置畫布樣式 */
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
// 獲取畫布并創(chuàng)建渲染上下文
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 定義落葉樣式
var leafColors = ["#307F4E", "#6FA22E", "#B8B41F", "#F69B09", "#D9592F", "#A31023"];
var leafTypes = ["?", "?", "?", "?"];
// 初始化葉子數(shù)組
var leaves = [];
// 定義落葉類
function Leaf(x, y, size, color, type) {
this.x = x;
this.y = y;
this.size = size;
this.color = color;
this.type = type;
this.speed = Math.random() * 3 + 1;
}
// 更新葉子位置
Leaf.prototype.updatePosition = function () {
this.y += this.speed;
if (this.y >canvas.height) {
this.y = -20;
}
};
// 繪制葉子
Leaf.prototype.draw = function () {
context.fillStyle = this.color;
context.font = this.size + "px Arial";
context.fillText(this.type, this.x, this.y);
};
// 初始化落葉
for (var i = 0; i < 40; i++) {
leaves.push(new Leaf(
Math.random() * canvas.width,
Math.random() * canvas.height,
Math.random() * 15 + 10,
leafColors[Math.floor(Math.random() * leafColors.length)],
leafTypes[Math.floor(Math.random() * leafTypes.length)]
));
}
// 創(chuàng)建循環(huán)以更新和繪制葉子
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < leaves.length; i++) {
leaves[i].updatePosition();
leaves[i].draw();
}
window.requestAnimationFrame(draw);
}
// 啟動(dòng)循環(huán)
window.requestAnimationFrame(draw);
</script>
</body>
</html>該示例代碼中使用JavaScript創(chuàng)建了一個(gè)Leaf類和一個(gè)Leaf數(shù)組，用于管理和繪制多個(gè)落葉實(shí)例。每個(gè)落葉實(shí)例都具有隨機(jī)大小、位置、顏色和形狀，它們以不同的速度飄落并在畫布上繪制。在啟動(dòng)循環(huán)時(shí)，每個(gè)落葉實(shí)例都會(huì)自動(dòng)更新其位置，并且在每一幀繪制后，清除畫布上的舊葉子并重新繪制新葉子，以使落葉動(dòng)畫具有平滑和連續(xù)的動(dòng)態(tài)效果。