HTML 캔버스에서 지속적으로 변하는 선 너비로 선 그리기

HTML 캔버스(Canvas)에서는 lineWidth 속성을 사용해 선의 두께를 지정할 수 있습니다. 하지만 하나의 경로(path)에는 하나의 선 너비만 적용되기 때문에, 두께가 연속적으로 변하는 선을 그리려면 짧은 선분들로 나누어 여러 번 그리면서 각 선분마다 다른 너비를 적용하는 방식을 사용해야 합니다.

아래 예제는 삼각함수로 원형 궤적 위의 점들을 생성하고, 반복문이 진행될수록 선 너비를 점점 증가시켜 마치 붓으로 그린 것처럼 점차 굵어지는 부드러운 곡선을 완성하는 코드입니다.

예제

var context = document.getElementById('canvas1').getContext('2d');
var pts = [null, null, null, null];
for(var i=-1; i<25; i=i+1)
{
   var width = 0.5+i/2;
   var m = 200;
   var x = Math.cos(i/4) * 180;
   var y = Math.sin(i/4) * 140;
   
   pts[0] = pts[1];
   pts[1] = pts[2];
   pts[2] = { X:x, Y:y};
   
   if(pts[0] == null)
   continue;
   var p0 = pts[0];
   var p1 = pts[1];
   var p2 = pts[2];
   var x0 = (p0.X + p1.X) / 2;
   var y0 = (p0.Y + p1.Y) / 2;
   var x1 = (p1.X + p2.X) / 2;
   var y1 = (p1.Y + p2.Y) / 2;
   
   context.beginPath();
   context.lineWidth = width;
   context.strokeStyle = "blue";
   context.moveTo(m+x0, m+y0);
   context.quadraticCurveTo(m+p1.X, m+p1.Y, m+x1, m+y1);
   context.stroke();
}

코드 동작 원리

• 좌표 계산: Math.cos()와 Math.sin()을 이용해 i 값에 따라 원형으로 배치된 점들의 x, y 좌표를 구합니다.
• 점 저장: pts 배열에 최근 세 개의 점을 유지하여 현재 위치와 이전 위치를 함께 참조할 수 있습니다.
• 중간점 계산: 인접한 두 점의 중점(x0, y0 및 x1, y1)을 구해 각 곡선 세그먼트의 시작점과 끝점으로 활용합니다.
• 부드러운 곡선: quadraticCurveTo() 메서드로 중간점 사이를 2차 베지어 곡선으로 연결해 각진 부분 없이 자연스러운 곡선을 만듭니다.
• 너비 증가: 매 반복마다 lineWidth를 0.5 + i/2 값으로 설정하여 선이 점진적으로 굵어지게 합니다.
• 색상 지정: strokeStyle을 "blue"로 설정한 뒤 stroke()로 실제 선을 화면에 그립니다.

이러한 기법은 캘리그래피 효과, 붓글씨 스타일의 드로잉 도구, 필압 또는 속도에 따라 두께가 달라지는 펜 입력 시각화 등 다양한 그래픽 애플리케이션에 응용할 수 있습니다.