HTML Referenzhandbuch

Vollständige Liste der HTML-Tags

HTML: <canvas> Tag

HTML - Der <canvas>-Tag ist ein HTML5Element, das verwendet wird, um in HTML-Dokumenten zu zeichnen2D-Objekte und Bitmap-Bilder usw. sind Container für Grafiken. Die tatsächlichen Grafiken in diesem Container werden durch das <script>-Tag gezeichnet. Dieses Tag wird auch oft als <canvas>-Element bezeichnet.

Online-Beispiel

Ein blauer Quadrat wird durch das <canvas>-Element angezeigt:

Beispiel

!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　canvas by de.oldtoolbag.com</title>
</head>
<body>
<h1>Graphics Example</h1>
<canvas id="w3codebox_com_canvas" width="125" height="125></canvas>
<script>
　　var canvas = document.getElementById("w3codebox_com_canvas");
　　var ctx = canvas.getContext("2d");
　　ctx.fillStyle = "#4B6692";
　　ctx.fillRect(25,　25,　100,　100);
　　ctx.clearRect(45,　45,　60,　60);
　　ctx.strokeRect(50,　50,　50,　50);
</script>
</body>
</html>

Testen Sie, um zu sehen ‹/›

In diesem HTML5In der Dokumentbeispiel haben wir das <canvas>-Tag verwendet, um ein Container mit der Größe125px x 125px und ID w3codebox_com_canvas.<script>-Tag wird verwendet, um Grafiken in diesem Container zu zeichnen. In diesem Beispiel haben wir einen blauen Quadrat mit einer Schräge innen gezeichnet.

Kompatibilität der Browser

IEFirefoxOperaChromeSafari

IE 9, Firefox, Opera, Chrome und Safari unterstützen das <canvas>-Tag.

Note:IE 8 Frühere Versionen von IE-Browsern unterstützen das <canvas>-Tag nicht.

Definition und Verwendung des Tags

<canvas> -Tag wird durch Skript (meistens JavaScript) verwendet, um Grafiken (z.B. Diagramme und andere Bilder) zu zeichnen.

<canvas> Tag is just a container for graphics, you must use scripts to draw graphics.

The HTML <canvas> element is located within the <body> Tag.
<canvas> Tag acts as a container for graphics. Draw all graphics outside the <canvas> Tag using the <script> Tag with the Canvas Script API or WebGL API

HTML 4.01 and HTML5differences between

<canvas> Tag is HTML5 New tags in

Tips and Notes

Note:Any text in the <canvas> element will be displayed in browsers that do not support <canvas>.

Tip:If you want to know all the properties and methods of the canvas object, please refer toHTML Canvas Reference Manual.

Attribute

New : HTML5 New attribute in

Attribute	Value	Description
heightHTML5	pixels	Define the height of the canvas.
widthHTML5	pixels	Define the width of the canvas.

Global Attributes

Support for <canvas> Tag Global Attributes of HTML.

Event Attributes

Support for <canvas> Tag HTML Event Attributes.

HTML: <caption> Tag HTML: <button> Tag