HTML - 캔버스 선 모양 스타일

선 모양을 지정하는 프로퍼티는 아래 표를 사용하여 스타일을 지정할 수 있습니다.

프로퍼티	설 명
strokeStyle	선 색상
fillStyle	채우려는 색상
globalAlpha	투명도를 지정. 0 ~ 1사이의 값 (0에 가까울수록 투명해짐)
lineWidth	도형의 선 두께 지정
lineCap	선 끝 모양을 지정. 다음 중 하나. 기본 값: butt butt: 평평한 모양 round: 둥근 모양 square: 사각 모양
lineJoin	선 연결 모양. 다음 중 하나. 기본 값: miter (선이 꺾일 때 두 선이 연결되는 지점의 모양을 설정) miter: 일반적인 모양 round: 둥근 모양 bevel: 연결부가 평평한 모양

lineCap 프로퍼티

선 끝 모양 스타일은 lineCap 를 사용하며 butt, round, square 중 하나를 설정합니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 150;
var context = canvas.getContext('2d');

var capType = ['butt', 'round', 'square'];
context.strokeStyle = "red";
context.lineWidth = 15;

for(var i=0; i<capType.length; i++) {
  context.lineCap = capType[i];
  context.beginPath();
  context.moveTo(20+i*80,10);
  context.lineTo(20+i*80,140);
  context.stroke();
}
</script>

lineJoin 프로퍼티

선 연결 모양은 선이 꺾일 때 두 선이 연결되는 형태를 지정합니다. miter, bevel, round 중 하나를 설정할 수 있습니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 150;
var context = canvas.getContext('2d');

var joinType = ['bevel', 'round', 'miter'];
context.strokeStyle = "red";
context.lineWidth = 15;

for(var i=0; i<joinType.length; i++) {
  context.lineJoin = joinType[i];
  context.beginPath();
  context.moveTo(-5, 5+i*40);
  context.lineTo(35, 45+i*40);
  context.lineTo(75, 5+i*40);
  context.lineTo(115, 45+i*40);
  context.lineTo(1555, 5+i*40);
  context.stroke();
}
</script>

miter 는 선의 길이가 약간 더 길게 그려집니다.