■ canvas 엘리먼트에서 이미지를 그리는 방법을 보여준다.
▶ test.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script language="javascript"> function onLoad() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); image = new Image(); image.onload = function() { context.drawImage(image, 10, 10); context.drawImage(image, 150, 10, 24, 24); context.drawImage(image, 200, 10, 96, 96); context.drawImage(image, 0, 0, 48, 48, 300, 10, 24, 24); context.drawImage(image, 48, 48, 48, 48, 350, 10, 24, 24); }; image.src = "ball.png"; } </script> </head> <body onload="onLoad();"> <canvas id="canvas" width="400" height="400" /> </body> </html> |
