HTML-Canvas-Formen

实例

Beispiel 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Probieren Sie es selbst aus

Canvas-Linienzeichnung

Linien werden mit Pfaden im Canvas gezeichnet:

Die Methode

beginPath(); Die Methode beginnt einen neuen Pfad. Sie zeichnet nichts, sie definiert nur einen neuen Pfad.

moveTo(); Definiert den Startpunkt der Linie. Sie zeichnet nichts, sie setzt nur einen Startpunkt.

lineTo(); Die Methode definiert den Endpunkt der Linie. Sie zeichnet nichts, sie setzt nur einen Endpunkt.

stroke(); Die Methode zeichnet tatsächlich Linien. Die Standard-Stiftfarbe ist schwarz.

Mehr Beispiele

Beispiel 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

Probieren Sie es selbst aus

Beispiel 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Probieren Sie es selbst aus

Hinweis

Um ein Rechteck zu zeichnen, müssen Sie nicht 4 Linien zeichnen.

wird in dem nächsten Kapitel gezeigt, wie man drawRect(); Methode, um Rechtecke zu zeichnen.

strokeStyle-Eigenschaft

strokeStyle Attribute definieren, die beim Zeichnen auf dem Canvas verwendet werden sollen.

muss vor dem Aufruf stroke(); davor setzen.

实例

ctx.beginPath();
// 定义矩形
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// 定义三角形
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

Probieren Sie es selbst aus

Weitere Informationen:

Vollständiges Canvas-Referenzhandbuch von CodeW3C.com