Aprendiendo Canvas JS

Canvas es una etiqueta de html que nos proporciona un area para utilizar como lienzo. Se utiliza para hacer animaciones con java scritp o para programar juegos.

En js accedemos al elemento canvas mediante document.querySelector o document.getElementBy*

Despues de guardar el elemento canvas en una variable debemos acceder al contexto de renderizado mediante el métdo .getContext() que recibe como parámetro un DOMString, el cual define el contexto de dibujo. Se utiliza "2d" o "webgl" para dibujar en 3D.

Veamos a continuación algunos métodos del contexto 2d:

Con los métodos fillRect() y strokeRect() podemos dibujar un rectángulo en el canvas. Como su nombre indica, fillRect rellenará todo el area del rectángulo; mientras que strokeRect solo dibujará el contorno.

Has clic en los siguientes botones para ver su efecto en el canvas:

Las propiedades fillStyle y strokeStyle Nos permiten asignar el color con el se va a dibujar en el canvas. Selecciona un color y vuelve a dibujar en el canvas con los botones anteriores.

Tambien podemos dibujar circulos/discos con los métodos beginPath() y arc()

Veamos ahora que parametros reciben cada uno de los métodos que hemos visto:

fillRect(x,y,ancho,largo) Recibe 4 parámetros. x,y representan las cordenadas (posicion) en las que dibujamos el rectángulo; ancho y largo representan sus dimensiones.