Lección 3
Canvas en HTML
El componente canvas es una especie de lienzo o contenedor que podemos incluir dentro de nuestra página, mediante la etiqueta <canvas> y </canvas>, en el cual podemos dibujar gráficos y realizar animaciones utilizando un lenguaje de programación web llamado JavaScript, el cual veremos con mayor detalle en otra unidad.
Atributos principales de la etiqueta <canvas>
- width: Indica el ancho del canvas.
- height: Indica la altura del canvas.
- Id: identificador del canvas
El tamaño por defecto del canvas, si no se le proporciona un tamaño específico, es de 300px de ancho por 150px de alto.
Cuando se crea un elemento canvas, inicialmente este no tendrá contenido ni borde, ya que el contenido se le especificará con código Javascript y para el borde podemos utilizar estilos CSS los cuales veremos con mayor detalle en otras unidades.
Para el borde vamos a agregar la siguiente propiedad al canvas utilizando CSS
style="border:1px solid #000000"La propiedad style está estableciendo un borde de 1px de ancho, cuya línea es continua (solid) y cuyo color es negro (#000000).
Ejemplo de inserción de un canvas
En el caso que el navegador no soporte el componente canvas, en vez de este, se le mostrará en pantalla el texto “El navegador no soporta el componente canvas” que hemos puesto adentro.
Ahora vamos a dibujar un simple gráfico dentro del canvas. En este caso dibujaremos un cuadrado utilizando código Javascript de la siguiente manera
Para incluir código Javascript dentro de nuestro documento HTML , podemos utilizar las etiquetas <script> y </script>, lo cual le indicará al navegador que lo que se encuentre dentro de estas etiquetas los debe interpretar como código Javascript y no como código HTML.
La instrucción document.getElementById("miCanvas"); indica que vamos a obtener el canvas con identificador “miCanvas” para poder dibujar sobre este. Es por esto que es indispensable que cada canvas tenga asociado un identificador para poder referenciarlo.
La instrucción c.getContext("2d"); indica que el grafico que se va a dibujar será en 2 dimensiones.
La instrucción ctx.fillStyle = "#FF0000"; indica que el color de relleno del rectángulo será rojo (#FF0000).
La instrucción ctx.fillRect(50,20,150,75); indica que se va a dibujar un rectángulo empezando desde la coordenada 50, 20 y terminando en la coordenada 150,75 dentro del canvas.
Ahora vamos para dibujar un círculo. Para esto agregamos el siguiente código Javascript:
Dentro del canvas también podemos dibujar o insertar una imagen ya existente. Para lograr esto podemos utilizar el código que se muestra a continuación.
Dando como resultado:
