이번 작업에서 canvas 태그를 활용해 보고자 하는 마음이 들었다.
그런데 사실상 한번도 제대로 사용해 본적이 없어 막막하기만 했다. ^^:
속성으로 어떻게 사용하는 것인가 검색만 두시간 넘게 해보니 대충 감이 왔다.
메모의 개념으로 정리해본다.
어디까지나 내가 보고 이해하는 생각대로 정리한 것이라...
다른 사람들이 보고 이게 뭐야 할지는 모르겠다 ㅎ
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) 방법
여기까지 메모하고 나니 구체적으로 어떻게 쓰는지도 메모해야 겠다는 생각이 들었다. ㅎ
<!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>
결과물 화면
출처 - http://bloodguy.tistory.com/439
