EverGiver
Line Style 본문
728x90
Line Style
- lineWidth
- 패스 선 두께를 지정하는 속성
- 숫자만 입력하며 px로 적용
- 기본값 1px - lineCap
- 선의 가장자리 스타일을 지정하는 속성
- 값 : butt (기본) / round / square
const canvas12 = document.getElementById('canvas12'); const ctx12 = canvas12.getContext('2d'); ctx12.lineWidth=10;ctx12.strokeStyle='coral'; ctx12.beginPath(); ctx12.lineCap = 'butt'; ctx12.moveTo(50,100);ctx12.lineTo(550,100); ctx12.stroke(); ctx12.beginPath(); ctx12.lineCap = 'round'; ctx12.moveTo(50,200);ctx12.lineTo(550,200); ctx12.stroke(); ctx12.beginPath(); ctx12.lineCap = 'square'; ctx12.moveTo(50,300);ctx12.lineTo(550,300); ctx12.stroke();
- lineJoin
- 두 개 이상의 선이 접하는 모서리 스타일을 지정하는 속성
- 값 : mitter (기본) / bevel / round
const canvas13 = document.getElementById('canvas13'); const ctx13 = canvas13.getContext('2d'); ctx13.lineWidth=20;ctx13.lineCap='round'; ctx13.strokeStyle = gra3; ctx13.beginPath(); ctx13.moveTo(50,300);ctx13.lineTo(100,100);ctx13.lineTo(150,300); ctx13.lineJoin = 'miter'; ctx13.stroke(); ctx13.beginPath(); ctx13.moveTo(250,300);ctx13.lineTo(300,100);ctx13.lineTo(350,300); ctx13.lineJoin = 'round'; ctx13.stroke(); ctx13.beginPath(); ctx13.moveTo(450,300);ctx13.lineTo(500,100);ctx13.lineTo(550,300); ctx13.lineJoin = 'bevel'; ctx13.stroke();
- setLineDash(segments)
- 현재 선의 대시 패턴 설정하는 메소드
- segments 배열 형식으로 점선에서 선이 그려지는 부분과 그렇지 않은 부분으로 구성되는 패턴 형식을 지정
▷ [3] : 선과 공백의 길이 모두 3px로 지정
▷ [2,3] : 선의 길이는 2px이고 공백의 길이는 3px로 지정
▷ [5,4,3,2] : 두 종류의 점선 패턴이 반복되는데 첫 번째 선의 길이는 5px이고 공백의 길이는 4px, 두 번째 선의 길이는 3px이고 공백의 길이는 2px로 지정
const canvas12 = document.getElementById('canvas12'); const ctx12 = canvas12.getContext('2d'); ctx12.lineWidth=10;ctx12.strokeStyle='coral'; ctx12.beginPath(); ctx12.lineCap = 'butt'; ctx12.moveTo(50,100);ctx12.lineTo(550,100); ctx12.setLineDash([20]); ctx12.stroke(); ctx12.beginPath(); ctx12.lineCap = 'round'; ctx12.moveTo(50,200);ctx12.lineTo(550,200); ctx12.setLineDash([20,40]); ctx12.stroke(); ctx12.beginPath(); ctx12.lineCap = 'square'; ctx12.moveTo(50,300);ctx12.lineTo(550,300); //ctx12.setLineDash([20,40,30,50]); ctx12.setLineDash([]); // 초기화 시킨다. ctx12.stroke();
728x90
'웹 디자인 > CANVAS' 카테고리의 다른 글
Path (0) | 2022.01.24 |
---|---|
Rectangles (0) | 2022.01.24 |
Pattern (0) | 2022.01.24 |
Gradients (0) | 2022.01.24 |
Styles and Shadow (0) | 2022.01.24 |
Comments