본문 바로가기

HTML5

[그래픽 처리] 컨텍스트(Context)의 속성

[그래픽 처리] 컨텍스트(Context)의 속성

컨텍스트의 여러 설정을 담당하는 주요 속성에 대한 정리입니다.

속성 의미
fillStyle 채우기 색
font 글꼴 지정
globalAlpha 투명도(0 : 투명~1 : 불투명)
globalCompositeOperation 겹칠 때의 동작 지정
lineCap 선 끝 유형을 지정(but, round, square)
lineJoin 선 교차시 처리 방법(round, bevel, miter)
lineWidth 선의 굵기
miterLimit lineJoin이 miter일 경우, 두 직선이 만나는 점의 처리 방식
shadowBlur 그림자의 흐림 정도를 지정
shadowColor 그림자의 색
shadowOffsetX 그림자의 x방향 거리
shadowOffsetY 그림자의 y방향 거리
strokeStyle 테두리 색
textAlign 글자 정렬 방식(start, end, left, right, center)
textBaseline 글자 표시되는 위치의 기준선을 지정