Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
Uso básico de Canvas
Comenzamos este tutorial observando el elemento<canvas>. Al final de esta página, sabrás como configurar el entorno 2D de canvas y habrás dibujado el primer ejemplo en tu navegador.
El elemento<canvas>
<canvas width="150" height="150"></canvas>A primera vista, un elemento<canvas> es parecido al elemento<img>, con la diferencia que este no tiene los atributossrc yalt. El elemento<canvas> tiene solo dos atributos -width yheight. Ambos son opcionales y pueden ser definidos usando propiedadesDOM. Cuando los atributos ancho y alto no estan especificados, el lienzo se inicializara con300 pixels ancho y150 pixels de alto. El elemento puede ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen es escalada para ajustarse al tamaño de su layout. Si el tamaño del CSS no respeta el ratio del canvas inicial, este aparecerá distorsionado.
Nota:Si su renderizado se ve distorsionado, pruebe especificar los atributos width y height explícitamente en los atributos del<canvas> , y no usando CSS.
El atributoid no está especificado para el elemento<canvas> pero es uno de losatributos globales de HTML el cual puede ser aplicado a cualquier elemento HTML (comoclass por ejemplo). Siempre es buena idea proporcionar unid porque esto hace más fácil identificarlo en un script.
El elemento<canvas> puede ser estilizado como a cualquier imagen normal (margin, border, background, etc). Estas reglas, sin embargo, no afectan a lo dibujado sobre el canvas. Mas adelante veremos cómo se hace esto en uncapítulo dedicado en este tutorial. Cuando no tenemos reglas de estilo aplicadas al canvas, este será completamente transparente.
Contenido alternativo
El elemento <canvas> se diferencia de un tag<img> en que, como los elementos<video>,<audio> o<picture>, es fácil definir contenido alternativo (fallback content) para mostrarse en navegadores viejos que no soporten el elemento <canvas>, como versiones de Internet Explorer previas a la versión 9 o navegadores de texto. Siempre debes proporcionar contenido alternativo para mostrar en estos navegadores.
Proporcionar contenido alternativo es muy explicito: solo debemos insertar el contenido alterno dentro del elemento <canvas>. Los navegadores que no soporten<canvas> ignoraran el contenedor y mostrarán el contenido indicado dentro de este. Navegadores que soporten<canvas> ignorarán el contenido en su interior (de las etiquetas), y mostrarán el canvas normalmente.
Por ejemplo, podremos proporcionar un texto descriptivo del contenido del canvas o proveer una imagen estática del contenido rederizado. Nos podría quedar algo así:
<canvas width="150" height="150"> current stock price: $3.15 +0.15</canvas><canvas width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt="" /></canvas>Etiqueta</canvas> requerida
De manera distinta al elemento<img>, el elemento<canvas> requiere cerrar la etiqueta (</canvas>).
Nota:Aunque las versiones anteriores del navegador Safari de Apple no requeria el cierre de la etiqueta, la especificacion indica que es necesaria, asi que tu deberias incluir esta para asegurarte la compatibilidad. Aquellas versiones de Safari (anteriores versiones a 2.0) renderizaran el contenido de regreso agregandolo al canvas mismo a no ser que utilice trucos de CSS para enmascararlo. Afortunadamente, los usuarios de aquellas versiones de Safari son raros hoy en dia.
Si el contenido alternativo no se necesita, un simple<canvas ...></canvas> es completamente compatible con todos los navegadores que soportan canvas.
El contexto de renderización
<canvas> crea un lienzo de dibujo fijado que expone uno o mas contextos renderizados, los cuales son usados para crear y manipular el contenido mostrado. Nos enfocaremos en renderizacion de contextos 2D. Otros contextos deberan proveer diferentes tipos de renderizaciones; por ejemplo,WebGL usa un 3D contexto ("experimental-webgl") basado sobreOpenGL ES.
El canvas esta inicialmente en blanco. Para mostrar alguna cosa, un script primero necesita acceder al contexto a renderizar y dibujar sobre este. El elemento<canvas> tiene unmethod llamadogetContext(), usado para obtener el contexto a renderizar y sus funciones de dibujo.getContext() toma un parametro, el tipo de contexto. Para graficos 2D, como los que cubre este tutorial, su especificacion es "2d".
var canvas = document.getElementById("tutorial");var ctx = canvas.getContext("2d");La primera linea regresa el nodo DOM para el elemento<canvas> llamando al metododocument.getElementById(). Una vez tu tienes el elemento nodo, tu puedes acceder al contexto de dibujo usando su metodogetContext().
Comprobando soporte
El contenido de regreso que es mostrado en navegadores los cuales no soportan<canvas>. Para los Scripts puede tambien comprobarse su soporte desde la programacion por un simple test para la presencia del metodogetContext(). Con un trozo de codigo parecido al que viene debajo:
var canvas = document.getElementById("tutorial");if (canvas.getContext) { var ctx = canvas.getContext("2d"); // drawing code here} else { // canvas-unsupported code here}Un esqueleto de plantilla
Aqui esta una plantilla minimalista, la cual usaremos como punto de partida para posteriores ejemplos.
<html> <head> <title>Canvas tutorial</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById("tutorial"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas width="150" height="150"></canvas> </body></html>El script incluye una funcion llamada draw(), la cual es ejecutada una vez finalizada la carga de la pagina; este esta hecho usando el evento load del documento. Esta funcion, o una parecida, podria tambien ser llamada usandowindow.setTimeout(),window.setInterval(), o cualquier otro manejador de evento, a lo largo de que la pagina esta siendo cargada la primera vez.
Aqui esta como la plantilla se ve en acción:
Un simple ejemplo
Para comenzar, daremos un vistazo a un simple ejemplo que dibuja dos rectangulos que se intersectan, uno de los cuales tiene alpha transparencia. Exploraremos como esto trabaja en mas detalle en posteriores ejemplos.
<html> <head> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect(10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect(30, 30, 55, 50); } } </script> </head> <body onload="draw();"> <canvas width="150" height="150"></canvas> </body></html>Este ejemplo quedaría así: