1_2. <canvas> 스타일

색칠

- fillstyle = "#d8d8d8";  -> 도형의 내부를 칠함

- strokeStyle = "rgba(50,50,50, 0.5)";  -> 도형의 외곽선을 칠함

투명도

- globalAlpha = 0.2 -> 이후에 그려질 도형들에 대한 투명값

- rgba() -> 조금 더 제어가 쉽고 융통성 있는 투명값

선 두께

 

선 모양

-lineWidth = 양수 

 

- lineCap = butt / round / square

좌측부터 butt / round / square

 

- lineJoin = round / bevel / miter  (라인을 닫는 모서리부분의 굴곡을 참고))

좌측부터 round / bevel / miter 

 

- miterLimit ..?

 

- getLineDash -> SetLineDash와 lineDashOffset로 정해진 대시패턴에 따라 대시라인을 사용

- SetLineDash -> 대시라인의 거리를 지정

- lineDashOffset -> 라인대시를 시작할 오프셋

그라디언트

- createLinearGradient(x1, y1, x2, y2) -> (x1, y1)에서 (x2, y2)까지의 그라디언트 오브젝트 생성

- createRadialGradient(x1, y1, r1, x2, y2, r2) ->두개의 원을 사용한 그라디언트 생성

 

- gradient.addColorStop(position, color) -> 그라디언트의 상대위치(0~1)에서 색상추가