<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>색상 지정하기</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400"
style="border: 2px solid #cef"> </canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let x = 50;
let y = 50;
let dx = 2;
let dy = 2;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = `rgb(${x % 255}, ${(x + y) % 255}, ${y % 255})`;
ctx.fillRect(x, y, 50, 50);
x = x + dx;
y = y + dy;
if (x + 50 > canvas.width || x < 0)
dx = -dx;
if (y + 50 > canvas.height || y < 0)
dy = -dy;
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
]]>