<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>물방울 애니메이션 만들기</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="500"
style="border: 2px solid #cef"> </canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let droplets = [];
function Droplet(x, y, radius, speed) {
this.x = x;
this.y = y;
this.radius = radius;
this.speed = speed;
this.draw = function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = "rgba(0, 0, 255, 0.4)";
ctx.fill();
}
this.update = function () {
this.y = this.y - this.speed;
if (this.y + this.radius < 0)
this.y = canvas.height + this.radius;
}
}
function createDroplet() {
let x = Math.random() * canvas.width;
let radius = Math.random() * 15 + 5;
let speed = Math.random() * 4 + 1;
return new Droplet(x, canvas.height + radius, radius, speed);
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < droplets.length; i++) {
droplets[i].update();
droplets[i].draw();
}
requestAnimationFrame(animate);
}
for (let i = 0; i < 50; i++) {
droplets.push(createDroplet());
}
animate();
</script>
</body>
</html>
]]>