티스토리 뷰

guriZzang.com에서 더 많은 html5, canvas의 튜토리얼을 보실 수 있습니다.

guriZzang.com 스터디블로그 바로가기


lineCap

선의 끝점 보양을 결정.

  • butt
  • 설명 : 선의 끝이 좌표에 딱 맞게 잘립니다.
  • round
  • 설명 : 선의 끝이 동그랗게 끝납니다.
  • square
  • 설명 : 선 끝에, 선 두께 반만큼의 사각형 영역이 더해집니다.




이 예제에서는, 각기 다른 lineCap 속성 값을 가진 선 세개가 그려집니다. 또한 각 선들의 차이점을 정확히 보이기 위한 안내선이 추가로 그려집니다. 세개의 선 모두, 이 안내선 위에 시작과 종료 좌표가 있습니다.


맨 왼쪽에 있는 선은 초기 설정값인 butt을 사용합니다. 안내선에 딱 맞게 선이 시작되고 끝이 납니다. 가운데에 있는 선은 round를 사용합니다. 선 두께의 반을 반지름으로 하는 반원이 끝에 붙습니다. 맨 오른쪽에 있는 선은 square를 사용합니다. 선 두께 만큼의 너비와 선 두께 반 만큼의 높이를 가진 네모 상자가 끝에 붙습니다.



선 그리기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineCap = ['butt','round','square'];
 
  // Draw guides
  ctx.strokeStyle = '#09f';
  ctx.beginPath();
  ctx.moveTo(10,10);
  ctx.lineTo(140,10);
  ctx.moveTo(10,140);
  ctx.lineTo(140,140);
  ctx.stroke();
 
  // Draw lines
  ctx.strokeStyle = 'black';
  for (var i=0;i<lineCap.length;i++){
    ctx.lineWidth = 15;
    ctx.lineCap = lineCap[i];
    ctx.beginPath();
    ctx.moveTo(25+i*50,10);
    ctx.lineTo(25+i*50,140);
    ctx.stroke();
  }
}


DEMO

댓글
댓글쓰기 폼
공지사항
Total
51,684
Today
5
Yesterday
37
링크
«   2020/10   »
        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
글 보관함