HTML <canvas> lineWidth - 선 두께 설정하기

선 모양 설정하기

lineWidth = value	이후 그려질 선의 두께를 설정합니다.
lineCap = type	선의 끝 모양을 설정합니다.
lineJoin = type	선들이 만나는 "모서리"의 모양을 설정합니다.
miterLimit = value	두 선이 예각으로 만날 때 접합점의 두께를 제어할 수 있도록, 연결부위의 크기를 제한하는 값을 설정합니다.
getLineDash()	음수가 아닌 짝수를 포함하는 현재 선의 대시 패턴 배열을 반환합니다.
setLineDash(segments)	현재 선의 대시 패턴을 설정합니다.
lineDashOffset = value	선의 대시 배열이 어디서 시작될지 지정합니다.

 

 

lineWidth = value

현재 선의 두께를 설정합니다. 설정값은 반드시 양수여야하며, 초기 설정값은 1.0 단위입니다.

 

선의 두께는 지정된 경로의 가운데에 있는 획의 두께입니다. 즉, 경로의 좌우로, 설정된 두께 반 만큼의 폭 영역이 그려진다는 것입니다. 캔버스 좌표는 픽셀을 직접 참조하지 않으므로, 선명한 수평 및 수직선을 얻기 위해 특별히 주의를 기울여야 합니다.

 

아래의 예제는 선의 두께가 점점 증가하는 10개의 직선이 그려집니다.

가장 왼쪽의 선은 1.0 단위 폭입니다. 그러나 경로의 위치 때문에 가장 왼쪽과 다른 모든 홀수 폭 두께 선은 선명하게 보아지 않습니다.

 

function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
      for (var i = 0; i < 10; i++) {
        ctx.lineWidth = 1 + i * 3;
        ctx.beginPath();
        ctx.moveTo(50 + i * 55, 50);
        ctx.lineTo(50 + i * 55, 550);
        ctx.stroke();
      }
    }

 

결과 화면

 

선명한 선을 얻으려면 경로에 획을 어떻게 그려지는지 이해해야합니다.

아래의 이미지를 보면, 격자는 캔버스의 좌표 격자를 나타냅니다. 격자선 사이에 있는 사각형은 실제 픽셀과 딱 맞아 떨어집니다. 아래에 있는 첫번째 이미지를 보면, (2, 1)에서 (5, 5)로 사각형이 채워져있습니다. 사각현의 전체 영역(연한 붉은 색)은 픽셀 경계선 사이에 딱 맞아 떨어지기 때문에 채워진 사각형은 선명한 가장자리를 갖습니다.

 

 

만일 (3, 1)에서 (3, 5)로 그리는 직선의 두께가 1.0이라면, 두번째 이미지와 같은 상황이 됩니다. 채워진 실제 영역(진한 파란색)은 패스의 양쪽에있는 픽셀의 절반까지만 확장됩니다. 이것은 1픽셀을 채우는 것이 아니므로 근사값으로 화면에 그려지게 됩니다. 그래서 양옆의 영역(연한 파한색과 짙은 파란색)으로, 실제 설정한 색과는 다른 흐릿한 색으로 채워지는 것입니다. 

 

이렇게 되는 것을 막으려면, 경로를 아주 정밀하게 생성하야 합니다. 선의 두께가 1.0이면 경로의 양쪽으로 0.5 단위만큼이라는 것을 알고 있으니, (3.5, 1)에서 (3.5, 5)로 그리는 경로를 생성하는 세번째 이미지의 결과는 완벽히 정밀하게 1 픽셀 두께의 수직선이 됩니다.

 

위에 나온 예제를 살펴보면, Y 위치는 정수로 된 격자선 위치를 참조하고 있습니다. 그렇지 않았다면, 끝점에서 픽셀의 반을 차지한 상태로 보였을 것입니다. (초기값이 butt인 lineCap 스타일의 설정값에 따라 다르게 보입니다. 홀수 두께 선들의 좌표를 0.5픽셀씩 조정하여 다시 게산하고 싶을지도 모릅니다. lineCap 스타일을 aquare로 설정함으로써, 끝점에서 선의 외곽 경계선은 픽셀에 딱 맞게 자동적으로 확장될 것입니다.)
경로의 시작 지점과 종료 지점의 끝점만이 영향을 받는다는 것에 주목하세요.
만약 closePath()로 경로가 닫히면, 시작 지점과 종료 지점은 없는 것입니다. 그 대신, 경로 안에 있는 모든 끝점들은, 초기 설정값이 miter인 lineJoin 스타일의 설정값을 사용하여 이전 부분 및 다음 부분과 이어지는데, 교차되는 점들로 이어진 부분들의 외곽 경계선을 자동적으로 확장하는 효과가 생깁니다.
그렇기 때문에 만약 이들 이어진 부분들이 수직 또는 수평이라면, 그려지는 선들은 각 끝점의 중심에 놓인 픽셀을 가즉 채우게 될 것입니다. 

 

짝수 두께의 선들은 반으로 나누어도 각각의 반은 정수의 양만큼이기 때문에 픽셀을 조정할 필요가 없습니다.

 

비트맵이 아닌 백터 2D 그래픽으로 작업할 때, 작업을 시작할 때는 약간 힘들겠지만, 격자와 경로의 위치에 주의를 기울인다면, 크기를 키우거나 줄이거나 또는 어떤한 변형을 하더라도 그리려는 이미지는 똑바로 보일것입니다. 

1.0 두께의 수직선은 2배로 크기를 키웠을 때, 정확히 2픽셀 두께의 선이 되며, 올바른 위치에 나타날 것입니다.