
Utilice el elemento html canvas con su API para dibujar y animar gráficos. El siguiente ejemplo agregará un elemento <canvas>
a un documento HTML, especificando su altura a través de la propiedad height
y el ancho a través de la propiedad width
.
Proporcionaremos un texto alternativo si el navegador no puede mostrar el elemento, es útil proporcionar contenido alternativo a aumentar la accesibilidad del contenido del elemento.
< canvas id = "canvas" width = "300" height = "300" > texto alternativo que describe lo que aparece en el elemento < code > canvas </ code > . </ canvas >
Suponiendo que dibujamos un rectángulo de 80×80 en rojo, el código JavaScript se verá así :
< script > var lienzo = documento . getElementById ( "canvas" ); var context = lienzo . getContext ( "2d" ); contexto . fillStyle = "# FF0000" ; contexto . fillRect ( 0 , 0 , 80 , 80 ); </ script >
Etiqueta html canvas
Clasificaciones de contenido | Un elemento organizativo, un elemento normal o un elemento con medios integrados. |
---|---|
Contenido permitido | Cualquier contenido que no tenga antecedentes. |
Acrónimo | Las etiquetas de inicio o finalización no se pueden omitir. |
Elementos del padre | Cualquier elemento que acepte contenido incrustado. |
Interfaz DOMO | HTMLCanvasElement |
Soporte de navegadores
Chrome | Firefox | Edge | Safari | Ópera |
---|---|---|---|---|
Soportado | Soportado | Soportado | Soportado | Soportado |
Características
En este elemento html canvas se pueden utilizar propiedades globales.
height
La altura del marco de dibujo de un objeto en <canvas>
píxeles, el valor predeterminado es 150.
width
El ancho del marco de dibujo en un elemento <canvas>
en un píxel, el valor predeterminado es 300.
Descripción de uso
Contenido alternativo
Puede y debe proporcionar contenido alternativo dentro del elemento <canvas>
, y ese contenido se publicará en navegadores más antiguos que no admiten este elemento y en navegadores en los que el usuario ha desactivado JavaScript.
Debe usarse la etiqueta de cierre
A diferencia del elemento <img>
, se supone que se proporciona la etiqueta de cierre </canvas>
.
Dimensiones del marco de dibujo
Las dimensiones del marco gráfico se pueden cambiar usando CSS, la imagen se redimensionará a escala en las dimensiones especificadas por CSS, y si el gráfico aparece distorsionado, intente especificar las dimensiones a través de las dos propiedades width
y height
en el elemento <canvas>
en lugar de usar CSS.
- Resumen General de Listas en HTML
- Qué son los Atributos HTML
- Introducción al Lenguaje de Programación HTML
- Elementos h1 al h6 en HTML
- Elemento wbr en HTML
- Elemento video en HTML
- Elemento var en HTML
- Elemento ul en HTML
- Elemento u en HTML
- Elemento track en HTML
- Elemento tr en HTML
- Elemento title en HTML
- Elemento time en HTML
- Elemento thead en HTML
- Elemento th en HTML
- Elemento tfoot en HTML
- Elemento textarea en HTML
- Elemento td en HTML
- Elemento tbody en HTML
- Elemento table en HTML
- Elemento summary en HTML
- Elemento sub en HTML
- Elemento style en HTML
- Elemento strong en HTML
- Elemento span en HTML
- Elemento source en HTML
- Elemento small en HTML
- Elemento select en HTML
- Elemento section en HTML
- Elemento script en HTML
- Elemento samp en HTML
- Elemento s en HTML
- Elemento q en HTML
- Elemento progress en HTML
- Elemento pre en HTML
- Elemento picture en HTML
- Elemento param en HTML
- Elemento p en HTML
- Elemento output en HTML
- Elemento option en HTML
- Elemento optgroup en HTML
- Elemento ol en HTML