Heim > Web-Frontend > HTML-Tutorial > Detaillierte Erläuterung der spezifischen Verwendung des -Tags in HTML5

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

黄舟
Freigeben: 2017-06-20 13:54:49
Original
1708 Leute haben es durchsucht

Das

-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>
Nach dem Login kopieren

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  
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage