Beispiel für das Hinzufügen eines Canvas-Tags zu HTML page_html5 Tutorial-Tipps

Im können Sie den folgenden Code verwenden, um das -Tag hinzuzufügen:

Code kopieren

Der Code lautet wie folgt:

Ihr Browser funktioniert nicht unterstützt HTML5 Canvas.

Übersetzungshinweis: Für Canvas ist die folgende Schreibweise nicht zulässig:

Code kopieren

Der Code lautet wie folgt:

Lassen Sie uns einen Blick darauf werfen, was der obige Code bewirkt. Das -Tag hat drei Hauptattribute, darunter:

1.id. Wir können den ID-Wert verwenden, um auf das -Tag im JavaScript-Code zu verweisen. Im obigen Code lautet der ID-Wert „canvasOne“.
2.Breite. Die Breite der Leinwand in Pixel. Im obigen Code beträgt der Breitenwert 500 Pixel.
3.Höhe. Die Höhe der Leinwand in Pixel. Im obigen Code beträgt der Höhenwert 300 Pixel.

Zwischen dem Start-Tag können wir einen beliebigen Text platzieren, wenn der Browser, der die HTML-Webseite öffnet, Canvas nicht unterstützt Wo sich das Etikett befindet. Im obigen Code verwenden wir den Text „Ihr Browser unterstützt kein HTML5 Canvas.“

Dokumentobjekt verwenden, um auf das Canvas-Element in JavaScript zu verweisen

Wenn die HTML-Seite geladen wird, verweist das Dokumentobjekt auf alle Elemente auf der Seite, sodass wir DOM verwenden können, um auf die im obigen Code definierte zu verweisen.

Wir benötigen einen Verweis auf das Canvas-Objekt, damit wir wissen, wo die Zeichnung über die Canvas-Schnittstelle angezeigt werden soll.

Zuerst definieren wir eine Variable namens theCanvas, die einen Verweis auf das Canvas-Objekt enthält.

Dann rufen wir die Funktion getElementById() des Dokumentobjekts auf und setzen den eingehenden Parameter auf canvasOne (die ID des -Tags in der HTML-Seite), um das Canvas-Objekt zu erhalten:

Code kopieren

Der Code lautet wie folgt:

var theCanvas = document.getElementById("canvasOne");