Manual de referencia HTML

大全 de etiquetas HTML

Etiqueta <caption> de HTML Etiqueta <button> de HTML

Etiqueta <canvas> de HTML

La etiqueta <canvas> es una etiqueta de HTML5La etiqueta se utiliza para dibujar2El contenedor de gráficos D y las imágenes bitmaps, etc. Los gráficos reales en este contenedor se dibujan con la etiqueta <script>. Esta etiqueta también se conoce comúnmente como el elemento <canvas>.

Ejemplo en línea

Mostrar un cuadrado azul mediante el elemento <canvas>:

Ejemplo

!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　canvas por es.oldtoolbag.com</title>
</head>
<body>
<h1>Ejemplo de Gráficos</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>

Prueba aquí ‹/›

En este HTML5En el ejemplo de documento, utilizamos la etiqueta <canvas> para crear un contenedor de tamaño125px x 125px y el ID del contenedor es w3El código <script> se utiliza para dibujar gráficos en este contenedor. En este ejemplo, dibujamos un cuadrado azul con un interior inclinado.

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

IE 9、Firefox、Opera、Chrome y Safari admiten la etiqueta <canvas>.

Notas:IE 8 Las versiones anteriores de IE no admiten la etiqueta <canvas>.

Definición y explicación de uso de la etiqueta

La etiqueta <canvas> se utiliza para dibujar gráficos (como gráficos y otras imágenes) mediante scripts (generalmente JavaScript).

La etiqueta <canvas> es solo un contenedor de imágenes, debe usar scripts para dibujar gráficos.

El elemento <canvas> HTML se encuentra dentro de la etiqueta <body>.
La etiqueta <canvas> actúa como contenedor de gráficos. Dibuje todos los gráficos fuera de la etiqueta <canvas> utilizando la etiqueta <script> con API de script de lienzo o API WebGL

HTML 4.01 y HTML5diferencias entre

La etiqueta <canvas> es HTML5 nuevas etiquetas en.

Consejos y notas

Notas:Cualquier texto en el elemento <canvas> se mostrará en navegadores que no admiten <canvas>.

Consejo:Si desea obtener todas las propiedades y métodos del objeto canvas, consulteManual de referencia de HTML pintura.

Atributo

New: HTML5 nuevo en el atributo.

Atributo	Valor	Descripción
heightHTML5	píxeles	Define la altura del lienzo.
widthHTML5	píxeles	Define el ancho del lienzo.

Atributos globales

Soporte de <canvas> etiqueta Atributos globales de HTML.

Atributos de eventos

Soporte de <canvas> etiqueta Atributos de eventos de HTML.

Etiqueta <caption> de HTML Etiqueta <button> de HTML