html5 Canvas 태그 context 메소드 정리

이번 작업에서 canvas 태그를 활용해 보고자 하는 마음이 들었다.

그런데 사실상 한번도 제대로 사용해 본적이 없어 막막하기만 했다. ^^:

속성으로 어떻게 사용하는 것인가 검색만 두시간 넘게 해보니 대충 감이 왔다.

메모의 개념으로 정리해본다.

어디까지나 내가 보고 이해하는 생각대로 정리한 것이라...

다른 사람들이 보고 이게 뭐야 할지는 모르겠다 ㅎ

context Methos

context.arc(300, 300, 200, 0, 2*Math.PI, true) 원 그림(x, y, radius, startAngle, endAngle, anticlockwise), (beginPath(), stroke() 필요)

context.fillText("문자열", 10, 10); 문자열 입력

context.fillRect(10, 10, 100, 100) 사각형 그림(x, y, width, height)

context.globalAlpha=0.2; 투명도

context.beginPath(); 선 그리기 시작

context.moveTo(10, 10); 붓 시작위치 변경(Y,X)

context.lineTo(200, 170); 붓 끝위치 변경(Y,X), 반복사용 가능(연속 그리기)

context.strok(); 여기까지가 선이다.

context.strokeStyle="rgb(80,10,230)" 선 색상

context.lineWidth=5; 선 굵기

context.lineCap="round"; 선 끝(square(좌표 밖), butt(좌표 안))

context.lineJoin="bevel";선을 연속그리기 시 모양 선택(round, miter)

context.fill(); 색 채우기

context.fillstyle ="rgb(100,170,30)";

gradient=context.createLinearGradient(x0, y0, x1, y1) x0, y0는 시작점 x1, y1 끝점

gradient=context.createRadialGradient(x0, y0, r0, x1, y1, r1)x0, y0는 시작점 x1, y1 끝점 r0, r1 은 원의 시작점 끝점

gradient.addColorStop(offset, color); offset 은 0~1 로 표현

context.font='40px "arial"';

context.textAlign=value;

context.textBaseline=value;

var image = document.getElementById("image");

context.drawImage(image, 100, 250); image 는 넣을 ID 값(이미지,x,y,width,height)

context.shadowOffsetX=10;

context.shadowOffsetY=10;

context.shadowBlur=10;

context.shadowColor="black";

context.translate(centerX, centerY); 개체가 변형되는 것이 아니고 캔버스가 변형

context.rotate(Math.PI*0.1); 회전

context.scale(2,2); 크기

context.save();현재의 캔버스 상태를 스택에 입력하는(push) 방법

context.restore();스택의 가장 최근에 저장된 상태를 출력하는(pop) 방법

여기까지 메모하고 나니 구체적으로 어떻게 쓰는지도 메모해야 겠다는 생각이 들었다. ㅎ

기본적인 Canvas 사용법

<!DOCTYPE HTML>
<HTML>
<HEAD>
<script>
window.onload=function() {
     var cnvs = document.getElementById("cnvs");
     if (cnvs.getContext) {
         var ctx = cnvs.getContext('2d');

        // 좌측 상단 빨간 사각형
         ctx.fillStyle = "rgb(255, 0, 0)";
         ctx.fillRect(10, 10, 50, 50);
         // 우측 하단 파란 사각형 (반투명)
         ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
         ctx.fillRect(40, 40, 50, 50);
     }
     else alert('canvas를 지원하지 않는 브라우저입니다.');
}
</script>
</HEAD>
<BODY>
    <canvas id="cnvs" width="100" height="100" style="background-color: ghostwhite; border: 1px solid black;"></canvas>
</BODY>
</HTML>