Um Canvas zu lernen, müssen Sie zunächst wissen, wie man Liniensegmente zeichnet. Anschließend können Sie viele einfache Liniensegmente verwenden, um komplexere Grafiken zu realisieren. Beispielsweise werden gängige Diagramme, Balkendiagramme, Liniendiagramme usw. alle durch Liniensegmente realisiert.
GrundkenntnisseDie Grundkenntnisse der Leinwand sind nicht groß. Ich weiß hauptsächlich, wie man Liniensegmente, Grafiken, Bilder, Texte usw. zeichnet. Canvas kann im Browser gezeichnet werden, oder mit Hilfe von Node-Canvas können einfache Bilder auf dem Node-Server gezeichnet werden. In diesem Artikel wird nur das Zeichnen im Browser beschrieben. Informationen zum Zeichnen auf der Knotenseite können Sie selbst überprüfen.
Um im Browser zu zeichnen, definieren Sie zunächst das Canvas-Element in HTML. Die Standardbreite und -höhe beträgt 300 * 150 und kann durch width
und height
festgelegt werden. Beachten Sie, dass die Breite und Höhe des Canvas-Elementstils und die Breite und Höhe der Canvas-Zeichnungsleinwand nicht dasselbe sind. Dies wird später besprochen.
<canvas id=canvas> <p>Der aktuelle Browser unterstützt Canvas nicht, bitte aktualisieren Sie Ihren Browser</p></canvas>
Vor dem Zeichnen müssen wir zunächst den 2D-Zeichnungskontext der aktuellen Leinwand abrufen und anschließend durch Bedienen des Kontexts zeichnen.
let canvas = document.querySelector('#canvas');if (!canvas) { throw new Error('can not find Canvas element');}// Hinweis 2d. // Durch Festlegen der Parameter Mit WebGL können Sie den 3D-Zeichnungskontext abrufen let ctx = canvas.getContext('2d');
Hinweis: Der obige Codeausschnitt wird in den folgenden Beispielen ignoriert und ctx
wird direkt verwendet, um den 2D-Zeichnungskontext der Leinwand darzustellen.
Werfen wir einen Blick auf das Koordinatensystem in der 2D-Zeichnung der Leinwand. Die obere linke Ecke des aktuellen Leinwandelements ist der Koordinatenursprung (0,0), die horizontale Richtung nach rechts ist die positive Richtung der X-Achse und die Die vertikale Abwärtsrichtung ist die positive Richtung der Y-Achse, wie unten gezeigt. Sie können das Koordinatensystem durch Translation, Rotation und Skalierung bedienen, um einige Animationen zu erzielen. Dieser Teil wird im Abschnitt „Animationswissen“ ausführlich erläutert.
Liniensegment Wenn Sie ein einfaches Liniensegment zeichnen, legen Sie normalerweise zuerst den Stil des Liniensegments fest, z. B. Farbe, Linienbreite, Linienendpunktstil usw. Wir legen den globalen Zeichenstil von ctx
fest, indem wir strokeStyle
festlegen, der rgba
oder legal hexadezimal sein kann Farbe, Wert oder Verlaufsobjekt usw. Der folgende Code zeichnet einfach ein rotes Liniensegment mit einer Breite von 10 von (10,10) bis (50,60).
ctx.StrokeStyle = 'red';ctx.lineWidth = 10;ctx.moveTo(10, 10);ctx.lineTo(50, 60);ctx.Stroke();
Schauen wir uns zunächst die Methoden und Eigenschaften im Zusammenhang mit dem Zeichnen von Liniensegmenten an.
Verwandte Eigenschaften:
Verwandte Methoden:
Versuchen Sie, unterschiedliche lineCap
Werte festzulegen, um dasselbe Liniensegment zu zeichnen
ctx.lineWidth = 10;ctx.textAlign = 'center';let Colors = ['red', 'green', 'blue'];let lineCaps = ['butt', 'round', 'square'];for ( let [index, lc] of lineCaps.entries()) { ctx.StrokeStyle = Colors[Index]; //Legen Sie die Farbe des Liniensegments fest ctx.lineCap = lc; ctx.beginPath(); // Den aktuellen Pfad löschen ctx.moveTo(10, 20 + 20 * index); 80 , 25 + 20 * Index);}
Wie aus den Ergebnissen in der obigen Abbildung ersichtlich ist, werden Endpunkte einer bestimmten Länge an beiden Enden des ursprünglichen Liniensegments hinzugefügt, wenn lineCap
auf rund und quadratisch eingestellt ist, mit der Ausnahme, dass rund ein Bogenstil und quadratisch ein rechteckiger Stil ist Stil. Zu beachten ist, dass im Canvas-Zeichnungskontext jeweils nur ein aktueller Pfad vorhanden sein kann. Um verschiedene Liniensegmente zu zeichnen, muss beginPath()
vor jeder Zeichnung aufgerufen werden, um die aktuelle Route zu löschen und einen neuen Pfad zu beginnen.
Versuchen wir, unterschiedliche lineJoin
Werte zu verwenden, um die Stile im Fokus der beiden Liniensegmente zu zeichnen.
ctx.lineWidth = 20;ctx.textAlign = 'center';ctx.lineCap = 'butt';let Colors = ['red', 'green', 'blue'];let lineJoins = ['bevel', 'round' , 'mitre'];for (let [index, lj] of lineJoins.entries()) { ctx.StrokeStyle = Colors[Index]; //Setze die Farbe des Liniensegments ctx.lineJoin = lj; //Setze lineJoin ctx.beginPath(); //Löschen Sie den aktuellen Pfad ctx.moveTo(10 + 80 * index, 20); 80 * index, 20); ctx.lineTo(50 + 80 * index, 60); ctx.fillText(lj, 40 + 80 * index, 80);}
Es ist ersichtlich, dass sich die drei Arten lineJoin
bei der Verarbeitung des Fokus der beiden Liniensegmente unterscheiden. Unter anderem kann beim Festlegen lineJoin=miter
das maximale Verhältnis der Länge der Gehrungslinie zur halben Linienbreite durch Festlegen des Attributs miterLimit
festgelegt werden. Wenn dieses Verhältnis überschritten wird, übernimmt lineJoin
die Abschrägungsmethode.
Canvas kann nicht nur durchgezogene Linien zeichnen, sondern auch gepunktete Linien. Zeichnen Sie eine gepunktete Linie, indem Sie die Eigenschaft lineDashOffset
festlegen und setLineDash()
aufrufen.
ctx.lineWidth = 10;ctx.textAlign = 'center';ctx.setLineDash([8, 8]); // Stellt 8 Pixel im durchgezogenen Linienteil und 8 Pixel im Lückenteil dar let Colors = ['red', 'green ', 'blue'];let lineDashOffsets = [1, 2, 4];for (let [index, ldOffset] of lineDashOffsets.entries()) { ctx.StrokeStyle = Colors[Index]; //Liniensegmentfarbe ctx.lineDashOffset = ldOffset; //Der Offset ist gesetzt ctx.moveTo(10, 20 + 20 * index); 100, 20 + 20 * index); ctx.fillText(`lineDashOffset:${ldOffset}`, 160, 25 + 20 * index);}
Wie Sie auf dem Bild sehen können, ist lineDashOffset
der festgelegte Versatz, um mit dem Zeichnen der gepunkteten Linie zu beginnen. Die Methode setLineDash()
akzeptiert einen Array-Parameter. Wenn die Anzahl der Arrays eine ungerade Zahl ist, kopiert sie standardmäßig das aktuelle Array-Element, um es in eine gerade Zahl umzuwandeln. Ab dem 0. Element stellt es die Länge des durchgezogenen Linienteils dar, das 1. Element stellt die Länge des Lückenteils dar, das 2. Element stellt die Länge des durchgezogenen Linienteils dar, das 3. Element stellt die Länge des Lückenteils dar, wenn es erreicht das letzte Element des Arrays, es beginnt wieder von vorne und so weiter.
ctx.lineWidth = 10;ctx.textAlign = 'center';let Colors = ['red', 'green', 'blue', 'gray'];let lineDashes = [[20, 20], [40, 40] , [20, 40], [20, 40, 20]];for (let [index, ld] of lineDashes.entries()) { ctx.StrokeStyle = Colors[Index]; //Setze Farbe ctx.setLineDash(ld); //Setze lineDash ctx.moveTo(10, 20 + 20 * index); + 20 * index); ctx.Stroke(); ctx.fillText(`lineDashes:[${ld}]`, 240, 25 + 20 * Index);}
let lineDashOffset = 0; //Initial lineDashOffsetctx.StrokeStyle = 'green';function animate() { if (lineDashOffset = 0; } ctx.clearRect(0, 0, width, height); aktuelle Leinwand ctx.lineDashOffset = -lineDashOffset; //lineDashOffset festlegen ctx.setLineDash([4, 4]); //Legen Sie die Länge der durchgezogenen Linie und die Länge der Lücke fest ctx.rect(20, 20, 100, 100); //Zeichne ein Rechteck ctx.Stroke(); //Den aktuellen Pfad zur Leinwand hinzufügen Stroke lineDashOffset += 1; //lineDashOffset offset plus 1 window.requestAnimationFrame(animate); //Verwenden Sie die Browser-Framerate, um die Animationsfunktion wiederholt auszuführen}animate();Zusammenfassung
Beim Zeichnen eines Liniensegments müssen Sie das Konzept des aktuellen Pfads der Leinwand verstehen. Zu einem bestimmten Zeitpunkt gibt es nur einen aktuellen Pfad auf der Leinwand. Beim Starten eines neuen Pfads muss beginPath()
aufgerufen werden. Sie können den Zeichenstil von Liniensegmenten festlegen, indem Sie lineWidth
, lineCap
und lineJoin
festlegen. Wenn Sie ein Liniensegment streichen, können Sie die Farbe des Liniensegments über strokeStyle
festlegen.
Mit lineDashOffset
und setLineDash()
können nicht nur durchgezogene Linien auf der Leinwand gezeichnet werden, sondern auch gestrichelte Linien.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.