도형 그리기 4

* 선 스타일 설정하기

- 선의 두꼐를 지정하려면 lineWidth 프로퍼티로 픽셀 수를 지정해야 함.

 

lineWidth=2;

 

- 선의 끝 모양(캡)은 lineCap 프로퍼티로 지정함.

 

lineCap="round";

 

butt	캡을 설정하지 않음. (기본값)
round	둥근 캡을 설정함.
square	사각 캡을 설정함.

 

- 패스로 연결한 선의 스타일은 lineJoin 프로퍼티로 지정함.

 

lineJoin="round";

 

bevel	모가 나지 않도록 함.
round	둥근 모양으로 만듦.
miter	끝이 뾰족한 모양으로 만듦. (기본값)  ※ miterLine 프로퍼티를 작게 설정하면 너무 뾰족하게 되는 것을 방지할 수 있음. (기본값 10)

 

 

* 음영 설정하기

- 음영을 설정하려면 shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY 프로퍼티를 설정해야 함.

 

1) shadowOffsetX : 음영의 가로 방향 폭을 지정

2) shadowOffsetY : 음영의 세로 방향 폭을 지정

3) shadowBlur : 음영의 흐리기 폭을 지정

4) shadowColor : 음영의 색을 지정

 

 

* 그라데이션 설정하기

- 선형 그라데이션은 createLinearGradient() 메서드로, 원형 그라데이션은 createRadialGradient() 메서드로 작성함.

 

createLinearGradient(x0, y0, x1, y1);

 

    : 그라데이션의 시작점 좌표

    : 그라데이션의 끝점 좌표

 

createRadialGradient(x0, y0, r0, x1, y1, r1);

 

    : 그라데이션의 시작 - 원의 중심 좌표 및 반지름

    : 그라데이션의 종료 - 원의 중심 좌표 및 반지름

 

- addColorStop() 메서드로 색을 추가하면 그라데이션의 색을 지정할 수 있음.

 

addColorStop(offset, color);

 

    : 색의 위치를 0(=시작)부터 1(=종료)까지의 수치로 지정함.

    : 색을 지정함.

 

- 예)

var grad = cvs.createLinearGradient(0, 0, 150, 0);
grad.addColorStop(0, "#ffffff");
grad.addColorStop(1, "#ddaaaa");
 
var grad2 = cvs.createRadialGradient(220, 30, 20, 250, 75, 75);
grad2.addColorStop(0, "#ffffff");
grad2.addColorStop(1, "#ddaaaa");   // 시작점을 흰색, 끝점을 빨간색으로하는 그라데이션을 작성함.
 
cvs.fillStyle = grad;
cvs.fillRect(0, 0, 150, 150);
cvs.beginPath();
cvs.arc(250, 75, 75, Math.PI*2, false);
cvs.fillStyle = grad2;
cvs.fill();

 

 

* canvas의 상태를 저장하기

- 선의 스타일 등을 설정하면 그 이후 canvas의 상태가 변해 버림.

- 상태를 저장해 두기 위해 save()라는 메서드가 마련되어 있음.

 

save();

 

- restore() 메서드를 실행하면 바로 직전에 save() 메서드를 실행했을 때의 상태로 되돌아감.

 

restore();

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)