티스토리 뷰
메서드와 속성 | 설명 |
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
링크
TAG
- 부등 연산자
- 동치 연산자
- innerHeight
- [[Prototype]]
- 일치 연산자
- javascript class
- 프로퍼티
- clinetTop
- outerHeight
- property
- 링크막기 #a링크막기
- __proto__
- 객체의 프로퍼티
- 동등 연산자
- constructor
- 불일치 연산자
- 대괄포 표기법
- prototype 프로퍼티
- offsetHeight
- offsetTop
- scrollHeight
- clientHeight
- scrollTop
- @font-face
- 점 표기법
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함