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:
0 comentarios, 0 referencias
+
#