<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 그리기</title>
</head>
<body>
<canvas id="myCanvas" width="700" height="350"
style="border: 2px solid #cef"> </canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const airplane = new Image(); // Image 객체 생성
airplane.src = "../media/airplane.png"; // Image 소스 지정
let x = 0;
let y = 300;
airplane.onload = function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(airplane, x, y, 100, 50); // (x, y)에 이미지 그리기
x = x + 2;
y = y - x / 400;
if (x > canvas.width) {
x = 0;
y = 300;
}
requestAnimationFrame(draw);
}
</script>
</body>
</html>
]]>