Apuntes de Canvas

Instrucciones básicas

Rellenar de color:

context.fillStyle=’#6666ff’;

Dibujar un rectángulo:

context.fillRect(posicionX, posicionY, avanceX, avanceY);

Color del borde:

context.strokeStyle = ‘rgba(70%,50%,20%,0.5)’;

Dibujar el borde de un rectángulo:

context.strokeRect = (posiciónX, posicionY, avanceX, avanceY);

Borrar parcial:

context.clearRect(posiciónX, posiciónY, avanceX, avanceY);

setInterval(); Automatizar una función

Esta función permite repetir el lanzamiento de una función una vez pase un tiempo determinado.

setInterval() recibe dos parámetros, en el primero la función a llamar, la cual se debe escribir con su nombre y sin paréntesis, en el segundo parámetro el tiempo tras el cual se debe volver a repetir la función en milisegundos.

setInterval(función, milisegundos);

Realizar un dibujo “modo plotter”

Además de realizar rectángulos (forma más sencilla de representar en Canvas) también podemos realizar dibujos más complejos.

Para ello el funcionamiento es similar al que podríamos tener con un plotter, y se pueden realizar los caminos del siguiente modo:

            beginPath(); esto indica que comenzamos “el dibujo”.

            moveTo(posicionX, posicionY); indica el lugar exacto en el que comenzaremos a dibujar.

            lineTo(posicionX, posicionY); indica el siguiente punto hasta el que debe desplazarse nuestro dibujo realizando una línea hasta él.

            fill(); rellena el dibujo, si no se ha cerrado el dibujo, lo cierra de forma automática para poder darle color.

            closePath(); esto realiza una línea hasta cerrar el dibujo.

            stroke(); pinta un borde a nuestro dibujo.

Realizar un dibujo con “arcos”

Para realizar dibujos con circunferencias se hace mediante la función arc

context.arc(posicionX, posicionY, radio, Math.PI /180 * startAngle, Math.PI/180 * endAngle, anticlockwise)

posicionX, posicionY

indica dónde vamos a situar el centro de la circunferencia.

radio

indica el radio que tendrá el arco.

Math.PI / 180 * startAngle

lugar de la circunferencia dónde vamos a empezar pintar el arco.

Math.PI / 180 * endAngle

lugar de la circunferencia dónde vamos a terminar de pintar el arco.

En  este punto hay que colocar Math.PI * 0, Math.PI * 0.5 etc… teniendo como referencia la imagen anterior.

Anticlockwise

es un valor booleano que indica el sentido en el que vamos a pinta el arco, si este valor es true el arco llevará el sentido contrario a las agujas del reloj. Si el valor es false, tendrá el sentido de las agujas del reloj.