HTML5是一個非常強大的語言,可以用來實現各種各樣的功能,不僅僅局限于網頁展示。比如,我們可以使用HTML5來制作一個有趣的小程序,讓雨滴在頁面上落下來。
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let drops = [];
let i = 0;
function drawRaindrop(x, y) {
const grad = ctx.createRadialGradient(x, y, 0, x, y, 15);
grad.addColorStop(0, "rgba(255, 255, 255, 0.5)");
grad.addColorStop(1, "rgba(255, 255, 255, 0)");
ctx.fillStyle = grad;
ctx.fillRect(x - 15, y - 20, 30, 30);
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 100; i++) {
const drop = drops[i];
drop.y += 5;
if (drop.y > canvas.height) {
drop.y = Math.random() * -canvas.height;
}
drawRaindrop(drop.x, drop.y);
}
}
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
for (i; i < 100; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
drops.push({ x, y });
}
setInterval(animate, 33);
</script>
上面的代碼中,我們使用了HTML5的canvas標簽來繪制雨滴,使用了JavaScript來完成動畫效果。我們通過創建100個雨滴對象,并在setInterval中實現雨滴的動畫效果。
下一篇不加粗css