Heim > Artikel > Web-Frontend > HTML5-Canvas-Zeichnungs-Tutorial (7) – quadraticCurveTo-Methode zum Zeichnen von Kurven in Canvas_HTML5-Tutorial-Fähigkeiten

HTML5-Canvas-Zeichnungs-Tutorial (7) – quadraticCurveTo-Methode zum Zeichnen von Kurven in Canvas_HTML5-Tutorial-Fähigkeiten

WBOYOriginal: 2016-05-16 15:50:111411Durchsuche

Wir sprechen weiterhin über die Methode zum Zeichnen von Kurven auf der Leinwand und sprechen heute über quadraticCurveTo.
Um ehrlich zu sein, ist diese Methode etwas beängstigend. Sie können sie zum ersten Mal allein anhand des Funktionsnamens erleben. Ich halte es übrigens für notwendig, den Namen dieser Funktion zu kürzen.
Quadratisch bedeutet quadratisch, was der quadratische Grad der quadratischen Gleichung in der Mathematik ist. Die Parameter von ctx.quadraticCurveTo lauten wie folgt:

Kopieren Sie den Code

Der Code lautet wie folgt:

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

wobei x,y die Koordinaten des Endpunkts und x1,y1 die Koordinaten der Kurvensteuerung sind Punkt? Was? Sie fragen mich, wo der Ausgangspunkt ist? Der Startpunkt wird zuvor mit moveTo bestimmt.
Der Grund, warum ich die Koordinaten der Kontrollpunkte mit der Seriennummer 1 versehen habe, liegt darin, dass eine Funktion zum Zeichnen einer Kurve, die später erwähnt wird, zwei Kontrollpunkte hat, nämlich x2 und y2, daher hier eine Vorsichtsaufnahme.
Der durch moveTo bestimmte Startpunkt und der durch quadraticCurveTo selbst bestimmte Endpunkt können zu einer geraden Linie verbunden werden. Da quadraticCurveTo nur einen Kontrollpunkt hat, liegt dieser Kontrollpunkt entweder auf der linken Seite der geraden Linie oder auf der rechten Seite Daher kann quadraticCurveTo nur Bögen zeichnen, jedoch keine S-Form.

Um das Verständnis zu erleichtern, verwende ich immer noch die Methode des Zeichnens von Hilfslinien im vorherigen Artikel. Der vorläufige Code lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

var x1=350,
y1 = 250,
x = 400,
y = 500;
ctx.StrokeStyle="#000"; >ctx.moveTo(300,300 ); //Startpunkt
ctx.quadraticCurveTo(x1,y1,x,y); //Echte Kurve
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);//Diese Zeile und die nächste Zeile sind Linien zum Zeichnen von Kontrollpunkten
ctx.lineTo(x,y);
ctx.moveTo(300,300);//Beginne, den Startpunkt und den Endpunkt der Kurve zu verbinden
ctx.lineTo(x, y);
ctx.Stroke();

Hier habe ich zwei Hilfslinien gezeichnet, eine ist die Verbindungslinie zwischen dem Startpunkt und dem Endpunkt und die andere ist die Hilfslinie vom Startpunkt zum Kontrollpunkt und dann zum Endpunkt (eigentlich zwei). Der Schnittpunkt dieser beiden Linien ist quadratischCurveZu Kontrollpunktkoordinaten.

quadraticCurveTo kann nur bogenförmige Kurven zeichnen, dieser Bogen kann jedoch sehr unregelmäßig sein, was eine Verbesserung im Vergleich zu arc und arcTo darstellt.
Außerdem wird quadraticCurveTo nicht wie arcTo umgekehrt.
Wenn Sie den Kontrollpunkt sehr weit verschieben, kann es natürlich sein, dass Ihnen die Grafiken ungewohnt vorkommen. Probieren wir es aus:
„y1 = 950;
“ Ich habe y1 einfach etwas größer verändert, und dann ging die Kurve über den Rahmen der Leinwand hinaus.

Der Bereich der von quadraticCurveTo gezeichneten Kurve kann jedoch niemals die Koordinaten der Kontrollpunkte erreichen oder überschreiten. Solange wir die Kontrollpunkte „kontrollieren“, müssen wir uns keine Sorgen machen.
Ich habe eine einfache bewegliche Beispielseite geschrieben, um den Prozess des Zeichnens von Kurven mit quadraticCurveTo zu zeigen. Ich hoffe, dass sie Ihnen helfen kann, Ihr Verständnis zu vertiefen:

<!DOCTYPE HTML>
<html lang="en-US">
<Kopf>
 <meta charset="UTF-8">
 <title>Canvas learning--quadraticCurveZum Zeichnen einer Kurve</title>
 <style type="text/css">
 Leinwand {box-shadow: 0 0 10px rgba(0,0,0,0.2) }
 </style>
</head>
<Körper>
 <canvas id="cvs" width="800" height="600">canvas wird nicht unterstützt</canvas>
</body>
<script type="text/javascript">
var cvs = document.getElementById('cvs'); //canvas
var ctx = cvs.getContext('2d'); // Pinsel
//ctx.closePath();
var x1=350,
 y1 = 250,
 x2 = 440,
 y2 = 550,
 x = 400,
 y = 500;
var fan = 1, fan1 = 1;
Funktion draw () {
 ctx.clearRect(100,100,600,600);
 ctx.beginPath();
 ctx.StrokeStyle="#000";
 ctx.moveTo(300,300);
 ctx.quadraticCurveTo(x1,y1,x,y);
 ctx.streich();
 /*ctx.beginPath();
 ctx.StrokeStyle = "rgba(0,255,0,1)"
 ctx.moveTo(300,300);
 ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
 ctx.Stroke();*/
 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.streich();
 if(x1 > 600) {
  Lüfter = -1;
 } else if (x1 < 200) {
  Lüfter = 1;
 }
 if(y1 > 700) {
  fan1 = -1;
 } sonst wenn (y1 < 200) {
  fan1 = 1;
 }
 x1 = Lüfter;
 y1 = fan1;
 setTimeout(draw,22);
}
ziehen();
//ctx.StrokeRect(100,100,50,50);
</script>
</html>

Tipp: Sie können einen Teil des Codes ändern, bevor Sie ihn ausführen
Bitte verzeihen Sie mir, wenn der Code hässlich ist.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in SVG 2D in HTML5 10 – Definition und Verwendung von Filtern_html5 Tutorial-FähigkeitenNächster Artikel：Einführung in SVG 2D in HTML5 10 – Definition und Verwendung von Filtern_html5 Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen