Contenido

Doodle.js, librería para trabajar con canvas

17 jun

+ 0

Doodle.js es una librería que nos permite trabajar fácilmente con el elemento <canvas /> y todo lo que ello conlleva. Con una estética similar a jQuery, dibujar sobre el lienzo que es <canvas /> es tan sencillo como esto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <!-- CANVAS PARA IE -->
  <!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->

  <!-- SCRIPT DOODLE -->
  <script src="./doodle-0.1.js" type="text/javascript"></script>
  <!-- JAVASCRIPT -->
  <script type="text/javascript">
    function init() {
			(function(oo) {
			 oo.canvas('#my_canvas');
			 var box = oo.rect({x:25, y:25,width:50, height:50, fill:"#ff0000"});
			 box.draw(); //draw a red box with initial parameters

			 box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
			 box.modify({fill:'purple'}).rotate(-45).draw();
			 box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
			 box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw();

			})($doodle);
    };
  </script>
  </head>
  <body onload="javascript:init();">
  <!-- ELEMENTO CONTENEDOR CANVAS -->
    <canvas id="my_canvas" width="600" height="400">
      <p>Error: El elemento canvas no está disponible para este navegador.</p>
    </canvas>
  </body>
</html>

Ejemplos

No os perdais algunos de los ejemplos disponibles en la página de la librería:

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.