■ 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 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script language="javascript"> function onLoad() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillRect(0, 0, 100, 100); var angle = Math.PI * 45 / 180; context.transform(1, 0, 0, 1, 200, 10); context.transform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), 0, 0); context.transform(2, 0, 0, 2, 0, 0); context.fillRect(0, 0, 100, 100); } </script> </head> <body onload="onLoad();"> <canvas id="canvas" width="400" height="400" /> </body> </html> |