캔버스 그래픽 요소-js

캔버스에서 스타일을 지정하는 방법

//fillStyle = color;
strokeStyle = color;

rgb / rgba / 16진수 / 색상이름

1) 선형 그라데이션
-createLinearGradient(x1, y1, x2, y2);
-색 중지점 할당 메서드 : addColorStop(position, color)

2) 원형 그라데이션
-createRadialGradient(x1, y1, x2, y2);
-색 중지점 할당 메서드 : addColorStop(position, color)

3) 패턴을 채우는 방법
-createPattern(Image, type)

4) 그림자효과 추가하기
1. shadowOffsetX = X축으로부터 그림자가 얼마나 떨어져있는가
2. shadowOffsetY = Y축으로부터 그림자가 얼마나 떨어져있는가
3. shadowBlur = 그림자의 밝기여부
4. shadowColor = 그림자 색상

4) 텍스트 선 관련 스타일 속성 :
1) 선 굵기 속성 : ctx.lineWidth = 값
2) 선의 끝 모양 : lineCap = butt || round || square
//square는 양쪽 끝의 높이가 선 너비의 1/2인 사각형을 추가
3) 선교차 스타일 : lineJoin = bevel || miter || round

나만의 그림판 만들기

박스 회전시키면서 색상 바꾸기