DOM Canvas 비트맵 그리기

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. }

결과