<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>원 그리기</title>
</head>
<body>
<canvas id="myCanvas" width="700" height="500"
style="border: 2px solid #cef"> </canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
function drawRandomCircle() {
let x = Math.random() * 700;
let y = Math.random() * 500;
let radius = Math.random() * 30 + 5;
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fillStyle = "rgba(0, 0, 255, 0.4)";
ctx.fill();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 1; i < 25; i++)
drawRandomCircle();
}
setInterval(() => { draw() }, 1000);
</script>
</body>
</html>
]]>