HTML5 Canvas-Pfade

HTML5 Canvas-Pfade werden verwendet, um in HTML5Auf dem Canvas werden verschiedene Arten von Formen (Linien, Kreise, Polygone usw.) gezeichnet, Pfade werden verwendet, um in HTML5Auf dem Canvas werden verschiedene Arten von Formen gezeichnet

HTML5 Canvas-Pfade sind eine Reihe von Punkten, zwischen denen Zeichnungsanweisungen vorhanden sind. Zum Beispiel gibt es zwischen einer Reihe von Punkten eine Linie oder sie haben eine Kurve.

Pfade werden verwendet, um in HTML5Auf dem Canvas werden verschiedene Arten von Formen (Linien, Kreise, Polygone usw.) gezeichnet, daher ist es sehr wichtig, dieses zentrale Konzept zu verstehen.

den Pfad beginnen und beenden - Pfad

Verwenden Sie2Die Funktion Context beginPath() und kann den Pfad beginnen und beenden, wie im folgenden Beispiel gezeigt:

var canvas = document.getElementById("ex1
");2var context = canvas.getContext("
//　d");context.beginPath();
context.closePath();

...Pfadzeichnungsoperationen

moveTo()2Bei der Verwendung von Pfaden verwenden Sie ein virtuelles "Stift" oder "Zeiger" Die virtuelle Zeiger befindet sich immer an einem bestimmten Punkt. Verwenden Sie

context.moveTo(10,10);

Die Funktion Context bewegt den virtuellen Zeiger, wie im folgenden Beispiel gezeigt:10,10.

lineTo()

Dieser Beispiel bewegt den Zeiger zum Punkt

context.beginPath();
context.moveTo(10,10);
context.lineTo(50,50);
context.closePath();

Die Funktion lineTo() zeichnet eine Linie von der Position des virtuellen Zeigers zum als Parameter an die Funktion übergebenen Punkt lineTo(). Dies ist ein Beispiel:10,10Dieser Beispiel bewegt den Zeiger zum Punkt5, dann zeichnet eine Linie von diesem Punkt zum Punkt50,

0 bewegt.50,5lineTo() bewegt auch den virtuellen Zeiger zum Ende dieser Linie. Daher wird im obigen Beispiel der Zeiger auf

0, gleichzeitig wird angezeigt, dass das Canvas die Linie bis zu diesem Punkt zeichnet. + stroke()

fill()2In dem Sie anweisen2Die stroke() oder fill() des Kontexts zeichnet nicht wirklich irgendetwas vor dem Zeichnen des Pfades. Durch Aufruf2Diese Operation wird im Kontext vorgenommen.
Die stroke()-Funktion zeichnet den Kontur des durch die Pfadoperation definierten Formes.
Die fill()-Funktion füllt die Form aus, die durch die Pfadoperation definiert wurde.
Dies sind beide Beispiele, stroke() und fill() werden auf die gleiche Form angewendet:

<canvas id="ex1" width="500" height="75" style="border:　1px solid #cccccc;">
HTML5　Canvas wird nicht unterstützt
</canvas>
<script>
var canvas = document.getElementById("ex1");var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();</script>

Dies ist das Ausgabergebnis des obigen Codes:

LineWidth

Sie können lineWidth verwenden 2Die Eigenschaften des Kontexts bestimmen die Breite der Linien, die durch verschiedene Strichfunktionen gezeichnet werden. Dies ist ein Beispiel:

context.lineWidth =　10;

Die obigen Beispiele stellen die Linienbreite für alle folgenden Zeichnungsoperationen der Linienstriche ein.10Pixel.
Dies sind drei Linien mit den Linienbreiten1,5und10:

Die Linienbreite ist größer als1wenn, dann wird die zusätzliche Breite der Linie außerhalb der Mittellinie gezeichnet. Das bedeutet, wenn Sie von10,10bis zu100,10Zeichnen Sie eine Linie mit einer Linienbreite von10, dann verläuft die Linie tatsächlich von10,5beginnt und erstreckt sich bis zu10,15, dann horizontal bis zu100,5und100,15Von dort. Wie ein Rechteck.

Linienkappe (lineCap)

Wenn Sie Linien mit einem Pfad zeichnen, können Sie die Linienkappe einstellen. Die Linienkappe definiert die Art und Weise, wie das Ende der Linie gezeichnet wird.
Die Linienbreite wird durch lineCap2Die Eigenschaft des D-Kontexts ist eingestellt. Es kann folgende Werte annehmen:

• butt

• round

• square

Dieser Wert butt führt dazu, dass das Ende der Linie flach und orthogonal zur Linie ist.
Dieser Wert round erzeugt eine abgerundete Linienende, bei der der Radius der Kante der halben Linienbreite entspricht.
Dieser Wert square führt dazu, dass am Ende der Linie ein Rechteck gezeichnet wird. Die Größe des Rechtecks beträgt line width x line width / 2.
Dies ist eine Gruppe von Beispielen zur Erklärung von Linienkappen. Die Breite aller Linien beträgt10. Die linke Linie verwendet den Wert lineCap butt. Die mittlere Linie verwendet den Wert lineCap round. Die rechte Linie verwendet den Wert lineCap square

Es kann sich um Werte handeln, die etwas schwer zu sehen sind, lineCap butt und square, die zwischen dem Strich und der Linie unterscheiden. Daher habe ich einige Beispiele mit butt und square erstellt, die nah beieinander gezeichnet werden, damit Sie die Unterschiede sehen können. Oben oder links wird butt verwendet, unten oder rechts wird square verwendet.

Wie Sie sehen können, zeichnet die Linie mit dem Wert lineCap square am Ende einen zusätzlichen Rechteck, was die Linie ein wenig länger macht.

Linienverbindung (lineJoin)

lineJoin 2Die Eigenschaft lineJoin des D-Kontexts definiert, wie der Punkt gezeichnet wird, der zwei Linien verbindet. Der Punkt, der zwei Linien verbindet, wird als "Linienverbindung" bezeichnet. Die lineJoin-Eigenschaft kann folgende Werte haben:

• miter

• bevel

• round

Hier sind drei Beispiele für den Code zur Einstellung der Linienverbindung:

context.lineJoin = "miter";
context.lineJoin = "bevel";
context.lineJoin = "round";

Der Wert von miter führt dazu, dass Winkel bei der Linienverbindung gezeichnet werden.
Der Wert von bevel führt dazu, dass Winkel bei der Linienverbindung gezeichnet werden.
Der Wert von round führt dazu, dass Kantenrunden bei der Linienverbindung gezeichnet werden.
Hier sind drei Beispiele (von links beginnend) miter, bevel und round, die als Werte der lineJoin-Eigenschaft verwendet werden.

arc()

2Die arc()-Funktion des D-Kontexts zeichnet einen Bogen auf der Leinwand.

Die Funktion arc() verwendet6Parameter:

• x: x-Koordinate des Mittelpunkts des Arcs

• y: y-Koordinate des Mittelpunkts des Arcs

• radius: Radius des Arcs

• startAngle: Winkel in Bogenmaß des Arc-Anfangs

• endAngle: Winkel in Bogenmaß des Arc-Endes

• anticlockwise: Setzt die Richtung der Einfügung auf gegen den Uhrzeigersinn (nicht im Uhrzeigersinn).

Dies ist ein Codebeispiel:

context.lineWidth =　3;
var x =　50;
var y =　50;
var radius =　25;
var startAngle = (Math.PI　/　180)　*　45;
var endAngle = (Math.PI　/　180)　*　90;
var anticlockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.stroke();
context.closePath();

Dieser Codebeispiel zeichnet einen Arc, dessen Mittelpunkt50,50, Radius25Pixel, von45Grad beginnt und bis180 Grad. Sie haben vielleicht bemerkt, dass von 0 Grad360 Grad werden in Bogenmaß umgerechnet.
So sieht der Codebeispiel auf dem Canvas aus:

Dies ist der gleiche Codebeispiel, aber anticlockwise auf true gesetzt:

Um einen vollständigen Kreis zu zeichnen, stellen Sie einfach startAngle auf 0 und endAngle auf2 * Math.PI ist gleich (Math.PI / 180) * 360

arcTo()

2Der D-Kontext hat einenarcTo()Funktionen, aber sie können mitlineTo()undum ihre Funktion zu imitierenarc(), daher werde ich sie überspringen

quadraticCurveTo()

Die Funktion quadraticCurveTo() zeichnet eine zweifache Bezier-Kurve von einem Punkt zum anderen. Diese Kurve wird durch einen einzigen Kontrollpunkt gesteuert. Dies ist ein Codebeispiel:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　100;
var toY =　50;
var cpX =　75;
var cpY =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.quadraticCurveTo(cpX, cpY, toX, toY);
context.stroke();
context.closePath();

Dieser Codebeispiel verwendet Kontrollpunkte75,100 (cpX, cpY) zeichnet eine Linie von50,50 bis100,5Kurve von 0. Das Ergebnis der Kurve ist wie folgt:

Die kleinen Punkte auf dem Canvas sind die Kontrollpunkte, die ich hier gezeichnet habe. Sie sind normalerweise nicht Teil einer Kurve

bezierCurveTo()

Die Funktion bezierCurveTo() zeichnet eine dreifache Bezier-Kurve von einem Punkt zum anderen. Eine dreifache Bezier-Kurve hat2Kontrollpunkte, während die二次Bezier-Kurve nur1Kontrollpunkte. Dies ist ein Codebeispiel:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　300;
var toY =　50;
var cp1X =　100;
var cp1Y =　100;
var cp2X =　250;
var cp2Y =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

Dieser Codebeispiel verwendet Kontrollpunkte100,100 (cp1X, cp1Y) und250,100 (cp2X, cp2Y) zeichnet von50,50 bis300,5Kurve von 0. Das Ergebnis der Kurve ist wie folgt:

Die beiden kleinen Punkte auf dem Canvas sind meine Kontrollpunkte, die ich verwende, um Ihnen ihre Position anzuzeigen. Sie sind nicht als Teil einer Kurve dargestellt.
Dies ist ein Beispiel mit verschiedenen Ausgangs-, End- und Kontrollpunkten:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　300;
var toY =　50;
var cp1X =　100;
var cp1Y =　10;
var cp2X =　250;
var cp2Y =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

Dies ist die entsprechende Kurve:

Genauso, zwei kleine Punkte sind meine klaren Renderkontrollpunkte