Trabajar con la API Canvas

Trabajar con la API Canvas

Seguimos con Canvas

Dibujando figuras geométricas:

• Función beginPath(): le indicamos a canvas que estamos creando una figura
• Posicioamos el dibujo con lineTo(x,y) u moveto(x,y) para dibujar líneas
• Usamos la función closePath() para finalizar el dibujo
• Dibujamos el resultado con la función stroke()

Color de las líneas: canvas.strokeStyle="rgba(r,g,b,alpha)"
Si queremos rellenar la figura geométrica, debemos usar la función fill() en vez de la función stroke() a la hora de dibujarla. El color lo configuramos con la función fillStyle()

Curvas Bezier
Utilizamos la función bezierCurveTo(float cp1x,float cp1y, float cp2x, float cp2y, float x, float y). 

Curvas cuadráticas
Utilizamos la función quiadraticCurveTo(float cpx, float cpy float x, float y)

Si queremos comprobar si el navegador admite el API canvas de HTML5 se utiliza la condición:

if (canvas.getContext) {...} else { alert(...) }

Dibuar Arcos
Utilizamos la función arc(float x, float y, float radius, float startAngle, floar endAngle, boolean anticlockwise)

Dibujar Textos

canvas.font= "tipo de letra"; ejemplo de tipo de letra: italix 40px sans-serifcanvas.strokeText("...",x,y);

Insertar imágenes

var img= new Image(); //creamos la imagenimg.src = "imagen.jpg"; //seleccionamos la ruta de la imagenimg.onload = function() {  canvas.drawImage(img,x,y);

Aquí podemos dibujar sobre una image

}

Gradientes
Se pueden añadir gradientes tanto lineales como radiales dentro de los colores de nuestro canvas:

var lingrad = canvas1.createLinearGradiant(x1,y1,x2,y2)var radgrad = canvas1.createRadialGradiant(x1,y1,radio1,x2,y2,radio2)lingrad.addColorsStop(offset,color)

Estos gradientes se pueden asignar a fill y stroke:

canvas1.fillStyle= lingrad;canvas1.strokeStyle = lingrad;

Otras funciones

• canvas.save()
• canvas.translate(x,y)
• canvas.rotate()
• canvas.restore()