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.
1 comentarios, 4 referencias
+
#