Etiqueta <canvas>

La etiqueta <canvas> incluye una zona que acogerá diseños y demás elementos gráficos.

Las dimensiones de esta zona están definidas por los atributos width y height, que fijan el ancho y la altura respectivamente.


<canvas width="200px" height="200px"></canvas>
 

Esta zona de dibujo es, por defecto, transparente. Una captura de pantalla no aportaría nada en este punto.

Para visualizar esta zona, incluida mediante la etiqueta <canvas>, agreguemos, mediante una propiedad de estilo, un simple borde de 1px.

Por otro lado, anticiparemos un identificador de tipo id para poder utilizar esta zona gráfica incluida con la etiqueta <canvas>.

El código queda así:


<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
</head> 
<body> 
<canvas id="dibujo" width="200px" height="200px" style="border: 1px 
solid black"> 
</canvas> 
</body> 
</html>
 
images/CAP22IMG01.png

La etiqueta <canvas> solamente es compatible con las últimas versiones de los navegadores. Por tanto es prudente prever un contenido alternativo para aquellos navegadores más antiguos que no implementan esta funcionalidad:


<canvas id="dibujo" width="200px" height="200px" style="border: 
1px solid black"> 
Su navegador...
Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Introducción
Siguiente
Llamada al API de diseño