DOM Canvas 비트맵 그리기

drawImage(image, dx, dy)	이미지를 그린다. - image : 이미지 엘리먼트 - dx : canvas에서 그려지는 x축 위치 - dy : canvas에서 그려지는 y축 위치
drawImage(image, dx, dy, dWidth, dHeight)	이미지를 그린다. - dWidth : canvas에서 그려지는 이미지의 가로길이 - dHeight : canvas에서 그려지는 이미지의 세로 길이
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);	부분 이미지를 추출하여 canvas에 그린다. 이미지 커팅 효과말고도, 확대 축소 효과를 만들 수도 있다. - sx : 원본 이미지의 좌측 위치 - sy : 원본 이미지의 상단 위치 - sWidth : 원본이미지에서 커팅할 길이 - sHeight : 원본 이미지에서 커팅할 높이
createPattern	패턴을 생성하여 그림을 그린다.

 

 

javascript

동적으로 이미지 엘리먼트를 다운받아서 그리는 예제이다.

1. function draw(target) {

2.     var canvas = document.getElementById("draw");

3.  

4.     // 지원 여부 체크

5.     if (canvas.getContext) {

6.         // HTML5에서 canvas를 지원시       

7.        

8.         var img = new Image();

9.         img.src = "이미지 경로";

10.         // 이미지 로딩

11.         img.onload = function() {

12.             // 이미지 로딩 완료시

13.             // 그리기 오브젝트를 받음

14.             var ctx = canvas.getContext('2d');

15.             // 그림을 그림

16.             ctx.drawImage(img,10,10);

17.         }       

18.     }

19. }

결과 

 

 

 

 

createPattern

배경색을 패턴으로 설정한다.

 

1. function load(target) {

2.     // 실제로 그려지는 위치의 캔버스 생성

3.     var canvas = document.getElementById("draw");

4.     var ctx = canvas.getContext("2d");

5.    

6.     var img = new Image();

7.     img.onload = function() {

8.         var pattern = ctx.createPattern(img, "repeat");

9.         ctx.rect(0, 0, canvas.width, canvas.height);

10.         ctx.fillStyle = pattern;

11.         ctx.fill();

12.     }

13.     img.src = "/example-canvas/test.jpg"

14. }

결과