Detaillierte Erläuterung der spezifischen Verwendung des -Tags in HTML5

Das

5ba626b379994d53f7acf72a64f9b697-Element ist für clientseitige Vektorgrafiken -Formen konzipiert. Es weist kein eigenes Verhalten auf, sondern stellt dem Client JavaScript eine Zeichen-API zur Verfügung, sodass das Skript alles, was es zeichnen möchte, auf eine Leinwand zeichnen kann.

canvas ist ein neu definiertes Tag in HTML5. Wie der Name schon sagt, ist es selbst ein Canvas-Tag und hat kein eigenes Verhalten. Es handelt sich lediglich um einen Grafikcontainer, für den ein Skript verwendet werden muss Grafiken zeichnen. Das Folgende ist ein Beispiel für seine Verwendung:

<canvas id="canvas" width="200" height="300">  
Your browser does not support HTML5 Canvas.  
</canvas>

Wie aus dem obigen Code ersichtlich ist, verfügt das Canvas-Tag über drei Attribute: id, width, height. Darunter ist der zu verwendende ID-Wert definiert es im JavaScript-Code Referenzieren Sie das -Canvas-Tag, um mit Canvas als Schnittstelle zu zeichnen. width und height definieren die Breite und Höhe der Leinwand. Die Standardeinheit ist Pixel. Die px-Einheit kann nicht nach der Zahl hinzugefügt werden.

Der Canvas-Tag wird nicht von allen Browsern unterstützt, daher müssen wir einen Text zwischen den Start- und End-Tags des Canvas platzieren. Wenn der Browser den Canvas-Tag nicht unterstützt, wird dieser Text angezeigt im Canvas-Tag befindet sich, um die Leser daran zu erinnern, dass das Canvas-Tag mit diesem Browser nicht funktioniert. In Javascript müssen Sie außerdem feststellen, ob der Browser dieses Tag unterstützt:

var canvas=document.getElementById("canvas")  
if(!canvas.getContext)  
{  
alert("Your browser does not support HTML5 Canvas.")  
}  
else  
{  
//do something here  
}

Sie können ein Canvas-Element verwenden, um ein rotes Rechteck anzuzeigen:

<canvas id="Canvas"></canvas>  
<script type="text/Javascript">  
var canvas=document.getElementById(&#39;Canvas&#39;);  
var ctx=canvas.getContext(&#39;2d&#39;);  
ctx.fillStyle=&#39;#FF0000&#39;;  
ctx.fillRect(0,0,80,100);  
</script>

Wie im obigen Beispiel: Es gibt keine Zeichen-API. Sie wird im Canvas-Element selbst definiert, sondern in einem Zeichenumgebungsobjekt, das über die getContext()-Methode des Canvas abgerufen wird. Die Canvas-API verwendet auch die Pfaddarstellung. Ein Pfad wird jedoch durch eine Reihe von Methodenaufrufen definiert, beispielsweise durch die Methoden beginPath() und arc(), und nicht durch eine Zeichenfolge aus Buchstaben und Zahlen. Sobald der Pfad definiert ist, werden andere Methoden wie fill() auf diesem Pfad ausgeführt.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der spezifischen Verwendung des -Tags in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!