En Carsonified.com nos muestran un interesante tutorial con el que iniciarnos en el uso de <canvas /> mediante Javascript.
// Comprobamos que <canvas /> esté disponible
if(drawingCanvas && drawingCanvas.getContext) {
// Inicializamos el lienzo 2D
var context = drawingCanvas.getContext('2d');
// Creamos la cara amarilla
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
// Añadimos 2 ojos verdes
context.strokeStyle = "#000000";
context.fillStyle = "#FFFFFF";
context.beginPath();
context.arc(80,80,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
context.fillStyle = "#009966";
context.beginPath();
context.arc(80,80,5,0,Math.PI*2,true);
context.closePath();
context.fill();
context.strokeStyle = "#000000";
context.fillStyle = "#FFFFFF";
context.beginPath();
context.arc(120,80,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
context.fillStyle = "#009966";
context.beginPath();
context.arc(120,80,5,0,Math.PI*2,true);
context.closePath();
context.fill();
// Creamos una nariz con firma de diamante
context.fillStyle = "#000000";
context.beginPath();
context.moveTo(93,100);
context.lineTo(100,93);
context.lineTo(107,100);
context.lineTo(100,107);
context.closePath();
context.fill();
// Añadimos la sonrisa
context.strokeStyle = "#000000";
context.beginPath();
context.moveTo(70,110);
context.quadraticCurveTo(100,150,130,110);
context.quadraticCurveTo(100,150,70,110);
context.closePath();
context.stroke();
}
Este código, nos permite generar la cara amarilla que vemos en el “Hello World” que vemos debajo:
Mucho código pero muchas posibilidades.
.
