Contenido

Hola mundo en canvas

10 sep

+ 5

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:

hello-world-canvas
(Ver Imagen)

Mucho código pero muchas posibilidades.

  • Por aca me puse a jugar tambien con canvas para hacer una demostracion de un fractal hecho con iteraciones (en vez de recursion)

    Definitivamente como dices, muchas posibilidades.

    Yo preveo un futuro en donde habran muchos componentes reutilizables UI hechos con canvas y javascript.

    Es cuestion de tiempo para que exista un kit super facil de usar , probablemente basado en jQuery. Me imagino controles como Arboles, Spinners, Tablas, etc.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.