티스토리 뷰

이론/Canvas

[Canvas] 선 스타일 함수

millfeel1298 2021. 3. 28. 19:58
메서드와 속성 설명
lineWidth 선의 너비. (기본값: 1.0)
lineCap stroke의 단면 스타일을 정의한다.
가능한 값: butt(기본값) round, square
lineJoin 두 선이 만나는 모서리 스타일을 정의한다.
가능한 값 : miter(기본값), round, bevel
miterLimit miter의 한계 비율. (기본값: 10)
setLineDash() 현재 선 대시 패턴을 설정한다.
선과 간격을 교대로 그리는 거리를 지정하는 숫자의 배열이다.
배열의 요소 수가 홀수이면 배열의 요소가 복사되고 연결된다.

getLineDash() 현재 lineDath 패턴 배열을 반환한다.
단, 배열이 홀수인 경우 패턴을 한번 더 반복해서 배열을 반환한다.
lineDashOffset 선에서 대시 배열을 시작할 위치를 지정한다.

lineCap

  • butt : 선의 끝은 끝점에서 사각형으로 나뉜다. (기본값)
  • round : 선의 끝이 둥글다.
  • square : 선의 끝은 동일한 너비와 선 두께의 절반 높이의 상자를 추가하여 사각형으로 나뉜다.


lineJoin

  • miter : 연결된 세그먼트는 추가 마름모꼴 영역을 채우는 효과와 함께 단일 지점에서 연결되도록 외부 가장자리를 확장하여 결합된다. 이 설정은 miterLimit속성의 영향을받는다. (기본값)
  • round : 연결된 세그먼트의 공통 끝점 중앙에있는 디스크의 추가 섹터를 채워 모양의 모서리를 둥글게 만든다. 이 둥근 모서리의 반경은 선 너비와 같다.
  • bevel : 연결된 세그먼트의 공통 끝점과 각 세그먼트의 별도 외부 직사각형 모서리 사이에 추가 삼각형 영역을 채운다.

See the Pen [canvas] 선 스타일 by mill (@millfeel) on CodePen.

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함