■ 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 |
<!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.fillStyle = context.createPattern(image, 'repeat'); context.fillRect(0, 0, 400, 400); }; image.src = "ball.png"; } </script> </head> <body onload="onload();"> <canvas id="canvas" width="400" height="400" /> </body> </html> |
