下雪效果是網頁設計中非常經典的一種效果，可以為網頁增添節(jié)日氣氛，給用戶帶來更好的瀏覽體驗。
<html>
<head>
<title>下雪效果</title>
</head>
<body>
<canvas id="snowCanvas"></canvas>
<script>
var canvas = document.getElementById("snowCanvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 雪花數組
var snows = [];
for (var i = 0; i < 50; i++) {
snows.push({
x: Math.random() * canvas.width, // 隨機位置
y: Math.random() * canvas.height,
r: Math.random() * 3 + 1, // 隨機半徑
d: Math.random() * 10 // 隨機速度
});
}
// 繪制雪花
function drawSnow() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "white";
ctx.beginPath();
for (var i = 0; i < snows.length; i++) {
var s = snows[i];
ctx.moveTo(s.x, s.y);
ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2, true);
}
ctx.fill();
moveSnow();
}
// 雪花飄落
function moveSnow() {
for (var i = 0; i < snows.length; i++) {
var s = snows[i];
s.y += s.d;
if (s.y > canvas.height) {
s.y = 0;
}
}
setTimeout(drawSnow, 25);
}
drawSnow();
</script>
</body>
</html>上述代碼使用canvas繪制了50朵雪花，在moveSnow()函數中讓雪花飄落，形成下雪效果。通過修改代碼中的參數，可以實現不同風格的下雪效果。
上一篇mysql修改列注釋
下一篇ios 嵌套vue