<!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>