HTML5: lienzo

El elemento HTML5 <canvas> le brinda una manera fácil y poderosa de dibujar gráficos usando JavaScript. Se puede usar para dibujar gráficos, hacer composiciones de fotos o hacer animaciones simples (y no tan simples).

Aquí hay un elemento <canvas> simple que tiene solo dos atributos específicos width y height más todos los atributos básicos de HTML5 como id, nombre y clase, etc.

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Puede encontrar fácilmente ese elemento <canvas> en el DOM usando el método getElementById () de la siguiente manera:

var canvas = document.getElementById("mycanvas");

Veamos un ejemplo simple sobre el uso del elemento <canvas> en un documento HTML5.

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

Esto producirá el siguiente resultado:

El contexto de renderizado

El <canvas> está inicialmente en blanco, y para mostrar algo, un script primero necesita acceder al contexto de renderizado y dibujar en él.

El elemento canvas tiene un método DOM llamado getContext, utilizado para obtener el contexto de representación y sus funciones de dibujo. Esta función toma un parámetro, el tipo de contexto2d.

A continuación se muestra el código para obtener el contexto requerido junto con una verificación si su navegador admite el elemento <canvas>:

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

Soporte del navegador

Las últimas versiones de Firefox, Safari, Chrome y Opera son compatibles con HTML5 Canvas, pero IE8 no es compatible con Canvas de forma nativa.

Puede usar ExplorerCanvas para tener soporte de lienzo a través de Internet Explorer. Solo necesita incluir este JavaScript de la siguiente manera:

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

Ejemplos de lienzo HTML5

Este tutorial cubre los siguientes ejemplos relacionados con el elemento <canvas> HTML5.

No Señor.	Ejemplos y descripción
1	Rectángulos de dibujo Aprenda a dibujar un rectángulo usando el elemento <canvas> HTML5
2	Trazados de dibujo Aprenda a hacer formas usando rutas en HTML5 <canvas> elemento
3	Líneas de dibujo Aprenda a dibujar líneas usando el elemento <canvas> HTML5
4	Dibujo de Bezier Aprenda a dibujar la curva Bezier usando el elemento <canvas> HTML5
5	Dibujo cuadrático Aprenda a dibujar una curva cuadrática usando el elemento <canvas> HTML5
6	Usando imágenes Aprenda a usar imágenes con el elemento <canvas> HTML5
7	Crear degradados Aprenda a crear degradados utilizando el elemento <canvas> HTML5
8	Estilos y colores Aprenda a aplicar estilos y colores con el elemento <canvas> HTML5
9	Texto y fuentes Aprenda a dibujar texto asombroso usando diferentes fuentes y su tamaño.
10	Patrón y sombra Aprenda a dibujar diferentes patrones y sombras.
11	Estados del lienzo Aprenda a guardar y restaurar estados del lienzo mientras realiza dibujos complejos en un lienzo.
12	Traducción de lienzo Este método se utiliza para mover el lienzo y su origen a un punto diferente de la cuadrícula.
13	Rotación de lienzo Este método se utiliza para rotar el lienzo alrededor del origen actual.
14	Escala de lienzo Este método se utiliza para aumentar o disminuir las unidades en una cuadrícula de lienzo.
15	Transformación de lienzo Estos métodos permiten modificaciones directamente a la matriz de transformación.
dieciséis	Composición del lienzo Este método se utiliza para enmascarar ciertas áreas o borrar secciones del lienzo.
17	Animación de lienzo Aprenda a crear animaciones básicas usando HTML5 Canvas y JavaScript.