02. HTML5 Canvas 에서 그리기...
기본 사각형 그리기
캔버스에서는 채워서 그리기, 테두리만 그리기, 투명하게 그리기 등 세 가지 방법으로 사각형을 그릴 수 있다.
function drawScreen()
{
context.fillStyle = "#000000"; //사각형 색상을 지정
context.strokeStyle = "#ff00ff"; //테두리 색상을 지정
context.lineWidth = 2; //라인두깨
context.fillRect( 10, 10, 40, 40 ); //x축 10, y축 10 위치에 넓이40 높이40의 사각형을 만든다.
context.strokeRect( 0, 0, 60, 60 ); //x축 0, y축 0 위치에 넓이60 높이60의 테두리를 만든다.
context.clearRect( 20, 20, 20, 20 ); //x축 20, y축 20 위치에 넓이20 높이20의 사각영역을 지운다.
}
캔버스 상태정보
캔버스 컨텍스트에 도형을 그릴 때는 상태 정보 스택을 이용한다.
- context.rotate()
- context.setTransform()
- globalAlpha
- strokeStyle
- textAlign, textBaseline
- lineCap, lineJoin, lineWidth, miterLimit
- fillStyle
- font
- shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY
기타 등등...
패스를 이용해서 선 그리기
function drawScreen()
{
context.strokeStyle = "black"; //표준 생상 이름 표기법
context.lineWidth = 10; //선두깨
context.lineJoin = "round"; //그린 선의 모서리 형태
context.lineCap = "square"; //그린 선의 끝 모양
context.beginPath(); //선 시작
context.moveTo( 10, 100 );
context.lineTo( 35, 100 );
context.lineTo( 35, 100 );
context.stroke();
context.closePath();
}
고급패스
원호그리기
x = 100;
y = 100;
radius = 20;
startAngle = (Math.PI/180)*0;
endAngle = (Math.PI/180)*360;
anticlockwise = false;
context.arc( x, y, radius, startAngle, endAngle, anticlockwise );
context.arcTo( x1, y1, x2, y2, radius );
베이어 곡선 그리기
context.bezierCurveTo( cp1x, cp1y, cp2x, cp2y, x, y ); //3차 베지어곡선
context.quadraticCurveTo( cpx, cpy, x, y ); //2차 베지어곡선
캔퍼스 영역 선택( 마스크효과랑 비슷 )
context.clip();
겹치기 효과
캔버스에서 그림을 그릴 때 투명도와 레이어를 어떻게 조절하는가에 따라 객체의 겹치기 효과를 결정할 수 있다.
시타일시트의 z-index 나 플래시에서 depth 기능과 흡사하다.
1. globalAlpha
2. globalCompositeOperation
- copy
- destination-atop
- destination-in
- destination-out
- destination-over
- lighter
- source-atop
- source-in
- source-out
- source-over
- xor
간단한 캔버스 변환
캔버스에서 변환은 그려진 도형에 수학 공식을 적용하여 물리적 변환 효과를 만드는 것이다.