>  기사  >  웹 프론트엔드  >  html5 캔버스 그리기 튜토리얼(7) - canvas_html5 튜토리얼 기술에서 곡선을 그리기 위한quadraticCurveTo 메소드

html5 캔버스 그리기 튜토리얼(7) - canvas_html5 튜토리얼 기술에서 곡선을 그리기 위한quadraticCurveTo 메소드

WBOY
WBOY원래의
2016-05-16 15:50:111448검색

캔버스에 곡선을 그리는 방법에 대해 계속 이야기하면서 오늘은 QuadraticCurveTo에 대해 이야기하겠습니다.
솔직히 이 방법은 함수 이름만 봐도 처음으로 체험해 볼 수 있을 정도로 좀 무섭습니다. 그런데 이 기능의 이름을 줄여야 할 것 같습니다.
Quadratic이란 수학에서 2차 방정식의 2차 차수를 의미하는 2차를 의미합니다. ctx.quadraticCurveTo의 매개변수는 다음과 같습니다.

코드 복사
코드는 다음과 같습니다.

ctx .quadraticCurveTo(x1,y1,x,y)

여기서 x,y는 끝점의 좌표이고 x1,y1은 곡선 제어의 좌표입니다. 가리키다? 무엇? 출발점이 어디인지 물어보시죠? 시작점은 moveTo를 사용하여 미리 결정됩니다.
제어점의 좌표를 일련번호 1로 붙인 이유는 나중에 언급할 곡선을 그리는 함수에 x2와 y2라는 두 개의 제어점이 있기 때문이므로 예방샷으로 올려드립니다.
moveTo에 의해 결정된 시작점과 QuadraticCurveTo 자체에 의해 결정된 끝점은 직선으로 연결될 수 있습니다. QuadraticCurveTo에는 제어점이 하나만 있으므로 이 제어점은 직선의 왼쪽 또는 오른쪽에 있습니다. 따라서 QuadraticCurveTo는 호만 그릴 수 있지만 여전히 S 모양은 그릴 수 없습니다.

이해를 돕기 위해 이전 글의 보조선 그리는 방법을 그대로 사용하고 있습니다. 예비코드는

코드복사
코드는

var x1=350,
y1 = 250,
x = 400,
y = 500;
ctx.beginPath();
ctx.StrokeStyle="#000"; >ctx.moveTo(300,300 ); //시작점
ctx.quadraticCurveTo(x1,y1,x,y); //실수곡선
ctx.Stroke()
ctx.beginPath();
ctx.StrokeStyle = "rgba(255,0,0,0.5)";
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);//이 줄과 다음 줄 제어점을 그리는 선입니다
ctx.lineTo(x,y)
ctx.moveTo(300,300);//곡선의 시작점과 끝점 연결 시작
ctx.lineTo(x, y);
ctx.Stroke()


여기서 두 개의 보조선을 그렸습니다. 하나는 시작점과 끝점 사이의 연결선이고, 다른 하나는 시작점에서 제어점을 거쳐 끝점까지의 보조선(실제로는 2개)입니다. 이 두 선의 교차점은 QuadraticCurveTo 제어점 좌표입니다.


quadraticCurveTo는 호 모양의 곡선만 그릴 수 있지만 이 호는 매우 불규칙할 수 있어 arc 및 arcTo에 비해 개선되었습니다.
또한,quadraticCurveTo는 arcTo처럼 반전되지 않습니다.
물론 제어점을 너무 멀리 옮기면 그래픽이 낯설게 느껴질 수도 있습니다. 시도해 보겠습니다.
“y1 = 950;
” y1을 조금 더 크게 변경했는데 곡선이 캔버스 범위를 벗어났습니다.


그러나 QuadraticCurveTo가 그린 곡선의 범위는 제어점의 좌표에 도달하거나 초과할 수 없습니다. 제어점을 "제어"하는 한 걱정할 필요가 없습니다.
quadraticCurveTo를 사용하여 곡선을 그리는 과정을 보여주기 위해 간단한 이동 가능한 예제 페이지를 작성했습니다. 이해를 높이는 데 도움이 되기를 바랍니다.


팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다.
코드가 보기 흉하더라도 양해해 주세요.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.