Kann das HTML5-Canvas-Element über den Canvas-Konstruktor erstellt werden?-HTML-Tutorial-php.cn

Kann das HTML5-Canvas-Element über den Canvas-Konstruktor erstellt werden?

PHPz

Freigeben： 2023-09-06 11:41:07

nach vorne

1217 Leute haben es durchsucht

Kann das HTML5-Canvas-Element über den Canvas-Konstruktor erstellt werden?

In diesem Artikel erfahren Sie, wie Sie ein HTML5-Canvas-Element mit dem Canvas-Konstruktor erstellen. Wir können diese Aufgabe erreichen, indem wir das

Bevor wir uns mit den Beispielen befassen, wollen wir zunächst die Definition und Verwendung des

Canvas Api kann zum Zeichnen von Grafiken über Javascript- und HTML-Elemente verwendet werden. Es kann auf Animationen, Spielgrafiken, Datenvisualisierung, Fotobearbeitung, Echtzeit-Videoverarbeitung usw. angewendet werden.

Der Schwerpunkt der Canvas-API liegt hauptsächlich auf visuellen 2D-Effekten. Die WebGL-API rendert hardwarebeschleunigte visuelle 2D- und 3D-Effekte mithilfe des

-Elements.

Sehen wir uns das folgende Beispiel an, um den Canvas-Konstruktor besser zu verstehen

Verwenden Sie die Methode getElementId()

Das Element mit dem angegebenen Wert wird von der Funktion

getElementById() zurückgegeben. Wenn das Element nicht vorhanden ist, gibt die Funktion getElementById() null zurück. Eine der am häufigsten verwendeten Methoden im HTML-DOM ist getElementById().

Beispiel

Im folgenden Beispiel verwenden wir getElementId(), um auf das

-Element zuzugreifen.

<!DOCTYPE html> 
<html> 
<body> 
   <canvas id="tutorial1" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
   <p>Click To Apply Canvas</p> 
   <button onclick="mytutorial()">CLICK</button>
   <script> 
      function mytutorial() { 
         var c = document.getElementById("tutorial1");
         var ctx = c.getContext("2d"); 
         ctx.fillStyle = "#D6EAF8"; 
         ctx.fillRect(20, 20, 150, 100);
      } 
   </script> 
</body> 
</html>

Nach dem Login kopieren

Wenn das Skript ausgeführt wird, greift es auf das

-Element zu und erzeugt eine Ausgabe, die aus einem Canvas-Feld mit der Aufforderung „Klicken, um Canvas anzuwenden“ und einer Klickschaltfläche besteht.

Wenn der Benutzer auf die Schaltfläche klickt, wird die Leinwand auf die Webseite angewendet.

Verwenden Sie die Methode createElement()

Die Methode

HTML DOM createElement() wird verwendet, um HTML-Elemente mithilfe von JavaScript dynamisch zu erstellen. Es erstellt den angegebenen Elementknoten mit dem Elementnamen als Argument.

Beispiel

Betrachten Sie das folgende Beispiel, in dem wir createElement() verwenden, um ein

-Element zu erstellen.

<!DOCTYPE html> 
<html> 
   <style> canvas { border: 1px solid black; } </style> 
<body> 
   <button onclick="mytutorial()">CLICK</button>
   <p>Click To Create Canvas</p> 
   <script> 
      function mytutorial() { 
         var x = document.createElement("CANVAS"); 
         var ctx = x.getContext("2d");
         ctx.fillStyle = "#ABEBC6"; 
         ctx.fillRect(20, 20, 150, 100);
         document.body.appendChild(x);
      } 
   </script> 
</body> 
</html>

Nach dem Login kopieren

Wenn Sie das obige Skript ausführen, wird eine Ausgabe generiert, die die Eingabeaufforderung „Klicken, um Leinwand zu erstellen“ und die Schaltfläche „Klicken“ enthält.

Wenn der Benutzer auf die Schaltfläche klickt, erhält die Methode createElement() Zugriff und erstellt die Leinwand auf der Webseite.

Das obige ist der detaillierte Inhalt vonKann das HTML5-Canvas-Element über den Canvas-Konstruktor erstellt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!