[HTML5] 2D Context tutorial (이미지)

HTML/CSS 2010. 2. 26. 17:59

* canvas 태그를 지원하는 chrome, FF 등의 브라우저에서 가능함.
참고 : https://developer.mozilla.org/en/Canvas_tutorial

1. 2D Context에 이미지 import 시키기

* 이미지를 import 시키는 4가지 방법
    1) 기존에 있던 image element 이용
      - document.images나 document.getElementsByTagName이나 document.getElementById 등을 이용)
    2) 다른 canvas의 이미지를 이용하는 방법
      - document.getElementById 등으로 다른 canvas를 이미지의 소스로 사용하는 방법.
    3) 이미지 객체를 생성해서 사용
      - javascript에서 new Image()를 이용하는 방법. 주의할 점은 2D Context에서 작업을 할 경우 생성된 객체의 onload event handler에서 해줘야 원활함.
    4) data: url 을 이용하는 방법
      - 각 포맷에 맞는 data: url을 canvas에 바로 때려 넣어서 사용하는 방법

이미지 객체를 생성해서 canvas에 import 시키고 2D Context로 조작하는 간단한 예제.
부처의 인상을 아주 약간 험악하게 조작.

<!DOCTYPE HTML>
<HTML>

            // 2d context에 이미지를 그림
            ctx.drawImage(img,0,0);

            // 그려진 context에 개판 치기
            // 불상을 좀 더 강해보이는 얼굴로
            ctx.beginPath();
            ctx.moveTo(190,80);
            ctx.lineTo(220,150);

var x1=180, y1=100;
var x2=210, y2=90;

            while (x1<=200) {
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);

                x1+=5; y1+=10;
                x2+=5; y2+=10;
            }
            ctx.stroke();
        }

    }
    else alert('canvas를 지원하지 않는 브라우저입니다.');
}
</script>
</HEAD>

2. 크기조절

drawImage() 함수의 4,5 번째 인자로 크기 조절 가능.
1/5 스케일의 부처를 원본 크기만큼 나열한 예제

<!DOCTYPE HTML>
<HTML>

            // 2d context에 크기를 조절하여 이미지를 그림
            var times = 5;
            var x = cnvs.width / times;
            var y = cnvs.height / times;
            for (var i=0; i<times; i++) {
                for (var j=0; j<times; j++) {
                    ctx.drawImage(img,i*x,j*y,x,y);
                }
            }
        }
    }
    else alert('canvas를 지원하지 않는 브라우저입니다.');
}
</script>
</HEAD>

3. 이미지 잘라 붙이기

우선 원본을 로딩하고 원본을 잘라서 원본 위에 붙이는 예제

<!DOCTYPE HTML>
<HTML>

<HEAD>
<script>
window.onload=function() {
    var cnvs = document.getElementById("cnvs");
    if (cnvs.getContext) {
        var ctx = cnvs.getContext('2d');
        // 이미지 객체 생성
        var img = new Image();
        // 이미지 링크 지정
        img.src = 'https://t1.daumcdn.net/cfile/tistory/145FE01449E08B865E';
        // onload event handler
        img.onload = function() {
            // canvas의 크기를 이미지 크기와 동일하게 맞춤
            cnvs.width = img.width;
            cnvs.height = img.height;

            // 원본 그리기
            ctx.drawImage(img, 0,0);
            // 원본을 작게 잘라 왼쪽 눈 위에 붙이기
            ctx.drawImage(img, 70, 90, 50, 50);
            // 오른쪽 눈 위에 붙이기
            ctx.drawImage(img, 170, 90, 50, 50);
        }
    }
    else alert('canvas를 지원하지 않는 브라우저입니다.');
}
</script>
</HEAD>

저작자표시

'HTML/CSS' 카테고리의 다른 글

[HTML5] WebSocket 서버의 handshake (0)	2010.12.02
[HTML5] WebSocket 서버 순서도 (0)	2010.12.02
[HTML5] canvas - tutorial (기본, 도형그리기) (0)	2010.02.26
[HTML5] CanvasRenderingContext2D 인터페이스 (0)	2010.02.26
[HTML5] canvas 의 width, height (0)	2010.02.19

Posted by bloodguy

Bloodguy
Twitter : @nicehide