So zeichnen Sie Grafiken mit js auf Leinwand

Verwenden Sie auf der Leinwand zunächst die HTML-DOM-Methode von JavaScript, um das -Element zu finden, verwenden Sie dann die Methode getContext(), um ein Zeichenobjekt zu erstellen, und verwenden Sie schließlich die Eigenschaften und Methoden des HTML-DOM-Canvas-Objekts zum Zeichnen Grafik. Die vom

HTML5-Element erstellte Leinwand dient nur zum Übertragen von Grafiken und ist ein Container. Wir müssen auch Skripte (normalerweise JavaScript) verwenden, um Grafiken tatsächlich dynamisch zu zeichnen . Wie zeichnet man also mit JavaScript Grafiken auf Leinwand? Dieser Artikel gibt Ihnen eine detaillierte Einführung und hoffe, dass er Ihnen hilfreich sein wird.

Leinwand erstellen

Bevor wir das Zeichnen von Grafiken vorstellen, müssen wir zunächst eine Leinwand mit dem Element erstellen >

<canvas id="myCanvas" width="300" height="200" style="border:2px solid red;">
当前的浏览器不支持HTML5 canvas标记。
</canvas>

Stellen Sie die Größe der Leinwand auf: Breite 400 Pixel, Höhe 200 Pixel, fügen Sie einen 2 Pixel großen roten, festen Rand hinzu; geben Sie der erstellten Leinwand einen id="myCanvas"-Wert, um das Auffinden des Leinwandelements beim Zeichnen von Grafiken unten zu erleichtern.

Rendering:

Verwenden Sie JavaScript, um Grafiken auf der Leinwand zu zeichnen

Unten Lassen Sie uns vorstellen, wie man Grafiken auf der Leinwand zeichnet:

1. Finden Sie das Leinwandelement

Wenn wir Grafiken zeichnen, müssen wir zuerst die Leinwand finden, auf der sich die Grafiken befinden muss gezeichnet werden, also das Wie findet man also das Canvas-Element?

Tatsächlich ist es sehr einfach, indem Sie die HTML-DOM-Methode getElementById() verwenden. Zum Beispiel:

var canvas = document.getElementById("myCanvas");// 找到画布元素

Als wir die Leinwand zuvor erstellt haben, haben wir den Wert von hinzugefügt id="myCanvas" zum Canvas hinzufügen. Jetzt können Sie diesen ID-Wert verwenden, um das -Element zu finden.

2. Konfigurieren Sie die Zeichenumgebung und erstellen Sie das Zeichenobjekt

Die Methode getContext() kann derzeit eine Umgebung zum Zeichnen auf der Leinwand zurückgeben „2d“ spezifiziert eine zweidimensionale Zeichenumgebung; diese kann in Zukunft erweitert werden, um 3D-Zeichnen zu unterstützen. Beispiel:

var ctx = canvas.getContext("2d");

Mit dem ctx-Objekt können Sie Grafiken im HTML5-Canvas zeichnen.

3. Zeichnen Sie Grafiken auf der Leinwand

An diesem Punkt können Sie die Eigenschaften und Methoden des von JavaScript unterstützten HTML-DOM-Canvas-Objekts zum Zeichnen von Grafiken verwenden. Schauen wir uns anhand einiger einfacher Beispiele an, wie man Grafiken zeichnet:

Beispiel 1: Zeichnen Sie eine einfache gerade Linie auf die Leinwand

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext(&quot;2d&quot;);
ctx.beginPath(); // 意思是开始绘制
ctx.moveTo(0,0);  
ctx.lineTo(300,200);  
ctx.stroke(); 
</script>

Wie Sie sehen können, verwenden Sie Es gibt mehrere Canvas-Objektmethoden, die wir im Folgenden vorstellen:

beginPath()-Methode: Definiert den Startpfad oder setzt den aktuellen Pfad zurück und zeigt den Beginn des Zeichnens an.

moveTo(x,y)-Methode: Wird zum Definieren des Startpunkts der geraden Linie verwendet.

lineTo(x,y)-Methode: Wird zum Definieren der Endposition der geraden Linie verwendet.

Stroke()-Methode: Zeichnet tatsächlich den definierten Pfad.

Rendering:

Beispiel 2: Zeichnen Sie einen einfachen Kreis auf die Leinwand

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext(&quot;2d&quot;);
ctx.beginPath();  
ctx.arc(95,50,40,0,2*Math.PI);  
ctx.stroke(); 
</script>

verwendet Der Bogen( )-Methode kann Bögen oder Kurven erstellen und zum Zeichnen von Kreisen oder Teilkreisen verwendet werden.

Rendering:

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Grafiken mit js auf Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!