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

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

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를 사용하여 곡선을 그리는 과정을 보여주기 위해 간단한 이동 가능한 예제 페이지를 작성했습니다. 이해를 높이는 데 도움이 되기를 바랍니다.

<!DOCTYPE HTML>
<html lang="en-US">
<머리>
 <meta charset="UTF-8">
 <title>캔버스 학습--quadraticCurve곡선을 그리려면</title>
 <스타일 유형="텍스트/css">
 캔버스 {상자 그림자: 0 0 10px rgba(0,0,0,0.2) }
 </스타일>
</머리>
<본문>
 <canvas id="cvs" width="800" height="600">캔버스는 지원되지 않습니다</canvas>
</body>
<스크립트 유형="텍스트/자바스크립트">
var cvs = document.getElementById('cvs'); //캔버스
var ctx = cvs.getContext('2d') // 브러시
//ctx.closePath();
변수 x1=350,
 y1 = 250,
 x2 = 440,
 y2 = 550,
 x = 400,
 와이 = 500;
var 팬 = 1, fan1 = 1;
함수 그리기() {
 ctx.clearRect(100,100,600,600);
 ctx.beginPath();
 ctx.StrokeStyle="#000";
 ctx.moveTo(300,300);
 ctx.quadraticCurveTo(x1,y1,x,y);
 ctx.스트로크();
 /*ctx.beginPath();
 ctx.StrokeStyle = "rgba(0,255,0,1)"
 ctx.moveTo(300,300);
 ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
 ctx.스트로크();*/
 ctx.beginPath();
 ctx.StrokeStyle = "rgba(255,0,0,0.5)";
 ctx.moveTo(300,300);
 ctx.lineTo(x1,y1);
 //ctx.lineTo(x2,y2);
 ctx.lineTo(x,y);
 ctx.moveTo(300,300);
 ctx.lineTo(x,y);
 /*ctx.moveTo(x2,y2);
 ctx.lineTo(x,y);*/
 ctx.스트로크();
 if(x1 > 600) {
  팬 = -1;
 } else if (x1  700) {
  팬1 = -1;
 } else if (y1 <br><input type="button" value="运行代码" onclick="runCode('runcode87')"> <input type="button" value="复制代码" onclick="copycode(runcode87)"> <input type="button" value="另存代码" onclick="saveCode(runcode87)">

팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다.
코드가 보기 흉하더라도 양해해 주세요.

성명：

이전 기사：HTML5 10의 SVG 2D 소개—filters_html5 튜토리얼 기술의 정의 및 사용다음 기사：HTML5 10의 SVG 2D 소개—filters_html5 튜토리얼 기술의 정의 및 사용

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

관련 기사