Etiqueta HTML <canvas>
Definición y uso
<canvas> Las etiquetas generalmente dibujan gráficos en tiempo real mediante scripts (generalmente JavaScript).
<canvas> Las etiquetas son transparentes, solo sirven como contenedores de gráficos y deben ser dibujadas mediante scripts.
En los navegadores que deshabilitan JavaScript y no admiten <canvas> En el navegador, se mostrará <canvas> Cualquier texto interno del elemento.
Consejo
Aprenda sobre el HTML Canvas en nuestro <canvas> conocimiento del elemento.
Para ver la referencia completa de todas las propiedades y métodos, visite nuestra Manual de referencia de Canvas HTML.
Ejemplo
Ejemplo 1
Dibuje en tiempo real un rectángulo rojo y muéstralo en el elemento <canvas>:
<canvas id="myCanvas">
Su navegador no admite la etiqueta canvas.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Ejemplo 2
Otro ejemplo de <canvas>:
<canvas id="myCanvas">
Su navegador no admite la etiqueta canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Abrir opacidad
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
Atributo
| Atributo | Valor | Descripción |
|---|---|---|
| height | Valor en píxeles | Define la altura del lienzo. El valor predeterminado es 150. |
| width | Valor en píxeles | Define el ancho del lienzo. El valor predeterminado es 300. |
Atributos globales
<canvas> La etiqueta también admite Atributos globales en HTML.
Atributos de eventos
<canvas> La etiqueta también admite Atributos de eventos en HTML.
Configuración CSS predeterminada
La mayoría de los navegadores mostrarán los siguientes valores predeterminados <canvas> Elemento:
canvas {
height: 150px;
width: 300px;
}
Historia de <canvas>
Este elemento HTML está diseñado para gráficos vectoriales del cliente. No tiene comportamiento propio, pero expone un API de dibujo al JavaScript del cliente para que los scripts puedan dibujar lo que quieran en una lienzo.
La etiqueta <canvas> fue introducida por Apple en el navegador web Safari 1.3. La razón de esta extensión fundamental a HTML radica en que la capacidad de dibujo de HTML en Safari también es utilizada por el componente Dashboard de Mac OS X, y Apple quería tener una manera de soportar gráficos scripteados en Dashboard.
Firefox 1.5 y Opera 9 siguieron la liderazgo de Safari. Ambos navegadores soportan la etiqueta <canvas>.
Incluso podemos usar la etiqueta <canvas> en IE, y construir una compatibilidad de lienzo con código JavaScript de código abierto (impulsado por Google) basado en el soporte de VML en IE. Ver:http://excanvas.sourceforge.net/.
Los esfuerzos por estandarizar <canvas> están siendo promovidos por una asociación no oficial de fabricantes de navegadores web, y actualmente <canvas> ya se ha convertido en una etiqueta oficial en el borrador de HTML 5. Ver:http://www.whatwg.org/specs/web-apps/current-work/
Las diferencias entre la etiqueta <canvas>, SVG y VML
Una de las diferencias importantes entre la etiqueta <canvas>, SVG y VML es que <canvas> tiene un API de dibujo basado en JavaScript, mientras que SVG y VML utilizan un documento XML para describir el dibujo.
Estas dos formas son funcionalmente equivalentes, cualquier una puede simular la otra. A primera vista, son muy diferentes, pero cada una tiene puntos fuertes y débiles. Por ejemplo, el dibujo SVG es fácil de editar, simplemente eliminando los elementos de su descripción.
Para eliminar elementos de un mismo gráfico en una etiqueta <canvas>, a menudo es necesario borrar el dibujo y volver a dibujarlo.
cómo usar la etiqueta <canvas> para dibujar
La mayoría de las API de dibujo de Canvas no están definidas en el elemento <canvas> en sí, sino en través de método getContext()en un objeto de "entorno de dibujo" obtenido.
El API de Canvas también utiliza la notación de ruta. Sin embargo, la ruta se define mediante una serie de llamadas a métodos, en lugar de describirse como una cadena de caracteres de letras y números, como por ejemplo las llamadas a los métodos beginPath() y arc().
Una vez definida la ruta, otros métodos como fill() operan sobre esta ruta. Las diversas propiedades del entorno de dibujo, como fillStyle, explican cómo se utilizan estas operaciones.
Nota:Una de las razones por las que el API Canvas es muy compacto es que no ofrece soporte para la escritura de texto. Para agregar texto a un gráfico <canvas>, debe dibujarlo y luego combinarlo con una imagen de mapa de bits, o usar la posición CSS en el <canvas> para cubrir el texto HTML.
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente el elemento por primera vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
