HTML5의 캔버스를 사용하여 곡선을 그리는 쉬운 방법

이 기사는 주로 곡선을 그리기 위해 HTML5 캔버스를 사용하는 간단한 방법을 소개합니다. HTML5 소개의 기본 지식입니다. 필요한 친구는 그것을 참조 할 수 있습니다.

Canvas2d의 자체 곡선 방법

최근에 저는 3D 소프트 바디의 계산을 연구하고 있으므로 몇 가지 지식을 추가하고 있습니다. 여기에는 종종 곡선에 대한 다양한 보간 알고리즘이 주로 수치 분석이 포함됩니다. 나는 캔버스 2D 자체가 2 차 및 큐브 BAZ 곡선을 사용하여 곡선을 그릴 수 있다는 것을 갑자기 기억했다. 사실, 나는 아직이 방법을 사용하지 않았다. 지금 시도해 봅시다 ~

이 기사는 단순한 곡선 도면에 관한 것이므로 많은 복잡한 원칙에 대해 이야기하지 마십시오. 게다가, BAZ 곡선 자체의 원리는 매우 간단합니다. 위키 백과를 보면 이해할 수 있습니다. 실제로, 많은 간단한 곡선 드로잉 도구는 BAZ 곡선을 사용합니다. Windows 자체 드로잉 도구에서 곡선을 사용한 경우 익숙해야합니다. 먼저 직선을 드래그 한 다음 특정 위치를 클릭하여 직선을 비틀어 놓을 수 있습니다. 초기 드래그 동작은 곡선의 두 정점을 결정하고 클릭 동작은 중간 지점을 추가합니다. Windows와 함께 제공되는 드로잉 도구는 입방 BAZ 곡선을 사용하며 두 가지 중간 지점을 추가 할 수 있습니다. 베이트 곡선은 일반적인 다항식 보간과 다릅니다. 중간 점은 곡선이 통과 해야하는 정점이 아니라 제어점으로 만 사용됩니다. 그리고 그것은 또한 닫힌 곡선을 만들 수 있습니다. Canvas2d는 곡선을 그리는 두 가지 방법을 제공합니다

2 차 큐 베트 : 2 차 바이즈 곡선

Beziercurveto : 입방 베젤 곡선

라인은 현재 위치에서 그려지고 현재 위치는 Moveto 메소드에 의해 지정 될 수 있습니다. 곡선의 시작 위치에서는 중간 지점과 끝 위치도 필요합니다. 이 위치 좌표를 드로잉 기능에 전달하십시오. 예를 들어, 2 차 Batez 곡선에는 중간 지점과 종료 위치가 필요하므로 2 개의 좌표를 2 차 커브 토 함수로 전달해야합니다. 좌표는 x와 y로 구성 되므로이 함수에는 4 개의 매개 변수가 있음을 의미합니다. Beziercurveto는 두 개의 중간 지점이 있다는 점을 제외하고는 동일합니다. 지금 사용합시다