Zeichnen Sie auf die Leinwand mit JavaScript
Alle Zeichnung auf den HTML-Leinwand muss JavaScript erfolgen:
Beispiel
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Versuch es selber " Schritt 1: Finden Sie das Canvas-Element
Zunächst einmal müssen Sie die finden <canvas> Element.
Dies wird durch die Verwendung der HTML - DOM - Methode durchgeführt getElementById() :
var canvas = document.getElementById("myCanvas");
Schritt 2: Erstellen Sie ein Zeichnungsobjekt
Zweitens müssen Sie ein Zeichnungsobjekt für die Leinwand.
Die getContext() ist eine integrierte HTML - Objekt, mit Eigenschaften und Methoden für das Zeichnen:
var ctx = canvas.getContext("2d");
Schritt 3: auf der Leinwand Zeichnen
Schließlich können Sie auf der Leinwand ziehen.
Stellen Sie den Füllstil des Zeichnungsobjekts auf die Farbe rot:
ctx.fillStyle = "#FF0000";Die fillStyle Eigenschaft kann eine CSS-Farbe, ein Farbverlauf oder ein Muster sein. Der Standard fillStyle ist schwarz.
Die fillRect( x,y,width,height ) Methode zeichnet ein Rechteck, mit dem Füllmuster gefüllt, auf der Leinwand:
ctx.fillRect(0,0,150,75);