프로그래밍/웹관련
[HTML5] 4. 캔버스를 이용하여 이미지그리기
2012. 1. 17. 10:40

IBM에서 제공하는 강좌를 보고 정리한 내용입니다.
IBM - HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기

글순서
1.자주쓰는 태그 정리
[HTML5] 1-1. 문서에서 자주쓰이는 태그 정리
[HTML5] 1-2. 문서에서 자주쓰이는 스타일 정리(CSS)
[HTML5] 2. 동영상 재생
[HTML5] 3. 기존 컨트롤들의 새기능과 새 스타일 적용
[HTML5] 4. 캔버스를 이용하여 이미지그리기

이번 포스팅에선 정말 독특한 기능인 캔버스입니다.
캔버스 영역에 자바스크립을 이용하여 선이나 도형등을 그릴수 있습니다,

윈폼으로 치자면 드로우기능인데 태그로는 지원이 안되는듯 하네요.
W3C의 규격을 보면 아직 진행중이라고 뜨는데......이게 표준이 진행중이라는건지 설명페이지가 진행중이라는건지 모르겠습니다.
(참고 : W3C - 4.8.11.2 Security with canvas elements)

어찌됬건 이런 드로우기능은 가벼운 이미지를 표현할때 정말 좋습니다.
문서에는 png나 jpeg규격의 이미지도 불러와서 사용할수 있으므로 웹상에서 기존이미지에 편집을 추가할수 있을듯 합니다.
아니면 웹화면을 캡쳐받아 강의 등을 할수도 있겠지요 ㅎㅎㅎ

캔버스 사용에 자세한 내용은 박종명님의 글을 추천 합니다.
박종명의 모바일플랫폼 since 2010.06 - [HTML5] CANVAS



1.베이스 코드
캔버스 영역자체는 스타일이 적용되지 않으면 배경과 구분이 되지 않습니다 ㅡ.-;;;
아래코드를 보고 캔버스 영역을 마음대로 만들어보세요.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="euc-kr" />
        <title>HTML5 연습 - 텍스트 스타일</title>
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
        <![endif]-->

    <style type="text/css">
 /* 여기서 스타일을 연습해 봅시다 */

canvas {
    border: 1px solid #888;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;    
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    background-color: #eee;
}

    </style>

    </head>
    <body>

        <canvas id="my_canvas" width="480" height="320"></canvas>
        <div id="no-canvas">
            <p>너님 브라우저가 위에 영역이 안보인다면 켄버스태그를 지원안하는 거임</p>
        </div>


    </body>
</html>




2.도형 그리기
이제 자바스크립트를 이용하여 도형을 그려 봅시다.
자바스크립트는 이전과 마찬가지로 해더(head) 안이나 바디(body) 안에 넣고 호출하면 됩니다.

<SCRIPT>
function loadCanvas() {
    var canvas = document.getElementById('my_canvas');
    if(canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(245,160,150,0,Math.PI*2,true);
        ctx.fillStyle = "rgb(255,255,204)";
        ctx.fill();
        ctx.stroke();

        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.arc(200,110,15,0,Math.PI*2,true);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(280,110,15,0,Math.PI*2,true);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(240,170,20,4,Math.PI*2,true);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(240,190,60,0,Math.PI,false);
        ctx.stroke();
    } else {
        document.getElementById('my_canvas').style.display = 'none';
        document.getElementById('no-canvas').style.display = 'block';
    }
}
</SCRIPT>

페이지가 로드되면 바로 스크립트가 실행될수 있도록 바디에 'onload'이벤트를 연결해 줍니다.

<body onload="loadCanvas();">



도형으로 그린 얼굴이 나옵니다!


3.그라데이션
얼굴에 그라데이션을 넣어 살짝 그럴써하게 만들어 봅시다.

그라데이션을 줄때는 그라데이션 객체를 미리 생성한후 필스타일(FillStyle)에 rgb대신 사용하시면 됩니다,
여기서 주의할 것을 그라데이션 좌표는 도형의 좌표와 상관없이 절대 좌표라는 점입니다.
도형이 옆으로 이동한다해도 그라데이션은 이동하지 않습니다.
좌표계산할때 같이 해야죠.

function loadCanvas() 
{
    var canvas = document.getElementById('my_canvas');
    if(canvas.getContext) {
        var ctx = canvas.getContext('2d');

	//그라데이션 만들기
	var objGradient = ctx.createLinearGradient(0,0,400,0);
	objGradient.addColorStop(0,"white");
	objGradient.addColorStop(1,"rgb(255,255,190)");  

	ctx.beginPath();
	ctx.arc(245,160,150,0,Math.PI*2,true);
	//그라데이션 지정
	ctx.fillStyle = objGradient;
	ctx.fill();
	ctx.stroke();

        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.arc(200,110,15,0,Math.PI*2,true);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(280,110,15,0,Math.PI*2,true);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(240,170,20,4,Math.PI*2,true);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(240,190,60,0,Math.PI,false);
        ctx.stroke();

    } 
    else 
    {
        document.getElementById('my_canvas').style.display = 'none';
        document.getElementById('no-canvas').style.display = 'block';
    }
}



4.이미지 넣기
캔버스 안에 이미지를 불러와 출력할수 있습니다.
문제는 이미지는 로딩이 완료되야(사용자 컴퓨터에 다운로드가 완료 되야) 사용이 가능하다는 점입니다.
이미지는 자바스크립트보다 로딩순서가 뒤에 있기때문에 타이밍이 안맞으면 출력이 안될 수도 있다는 의미 ㅡ.-;;

html파일이 잇는 경로에 그림파일을 넣고 loadCanvas()함수의 if문 안에 'var ctx = canvas.getContext('2d');' 이 코드 밑에(line 6) 이미지를 출력하는 코드를 넣어 배경을 만들어 봅시다.

//이미지 객체 만들기
var imgBG = new Image();
//이미지 지정(상대/절대 다됨)
imgBG.src = "a001.jpg";	
//화면에 이미지 표시
//x,y,top,right
ctx.drawImage(imgBG, 0, 0, 500,500);

만약 한번에 이미지가 안나온다면 이미지가 다운로드 안된것으로 판단한다는 의미입니다 ㅡ.-;;;
다시 새로고침을 몇번해보시면 출력되는 것을 확인 할수 있습니다.


참 쉽조잉?


5.글자(텍스트 넣기)
이미지가 되는데 텍스트가 안되겠습니까?
ㅎㅎㅎ


if문의 맨 마지막 'ctx.stroke();'의 다음줄에 아래 코드를 넣습니다.

ctx.font = "20px '고딕'";
ctx.fillStyle = "white";
ctx.fillText("안녕, 세계!",10,50);


폰트 특징상 사용자가 폰트를 가지고 있지 않다면 깨지거나 이상하게 표현될수 있습니다.




후기
이렇게 간단하게 HTML5기초에 관한 연재가 끝났습니다.^^;
언제나 좋은 강좌만들어주시고 번역해주시는 ibm에게 감사합니다.

이제 html5를 잠시 접어두고 gwt를 할 예정입니다.
뭐.....포스팅은 언제나 제맘대로이니 ㅎㅎㅎㅎ




티스토리툴바