HTML5 Canvas에서 여러 점을 통해 부드러운 곡선을 그리는 방법은 무엇입니까?

Javascript HTML5 Canvas에서 여러 점을 사용하여 부드러운 곡선을 그리는 방법

그리기 응용 프로그램에서 아티스트는 종종 통과하는 부드러운 곡선을 만들어야 합니다. 여러 지점을 통해 HTML5 캔버스는 lineTo,quadraticCurveTo 및 bezierCurveTo와 같은 선 그리기 기능을 제공하지만 각 점 그룹에 대해 순서대로 사용하면 곡선이 분리될 수 있습니다. 이 기사에서는 여러 점을 통해 부드러운 곡선을 그릴 수 있는 솔루션을 제시합니다.

부드러운 전환을 위한 중간점 보간

부드러운 곡선을 그리는 핵심은 날카로운 각도를 피하는 것입니다. 곡선이 만난다. 이는 인접한 점의 중간점 사이에 곡선을 그려서 얻을 수 있습니다. 이렇게 하면 각 곡선의 끝점이 공통 제어점을 공유하여 곡선 사이가 원활하게 전환됩니다.

근사 방법

다음 코드 조각은 중간점을 보여줍니다. 보간 방법:

<code class="js">// move to the first point
ctx.moveTo(points[0].x, points[0].y);

for (var i = 1; i < points.length - 2; i++) {
  var xc = (points[i].x + points[i + 1].x) / 2;
  var yc = (points[i].y + points[i + 1].y) / 2;
  ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
}

// curve through the last two points
ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);</code>

이 코드에서는 첫 번째 점으로 이동한 다음 나머지 점을 반복합니다. 각 점에 대해 현재 점과 다음 점 사이의 중간점을 계산하고 이 중간점에 2차 곡선을 그립니다. 마지막으로 마지막 두 점 사이에 2차 곡선을 그립니다.

근사법의 장점

이 방법은 각 점을 정확하게 따르지는 않지만 시각적으로 부드러운 곡선을 제공합니다. 근사. 대부분의 도면 응용 프로그램에서는 이 수준의 정확도로 충분합니다.

추가 읽기

모든 지점을 통과하는 보다 정확한 방법은 다음 리소스를 참조하세요. http ://www.cartogrammar.com/blog/actionscript-curves-update/.

위 내용은 HTML5 Canvas에서 여러 점을 통해 부드러운 곡선을 그리는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!