17
Jun
aNieto2k hace 17 días en: Programacion, estandares, javascript, web, webdev
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:
13
Jun
aNieto2k hace 21 días en: Asides, Programacion, estandares, javascript, web, webdev
Interesante artículo de Andrés Fernández en el que nos muestra la forma de optimizar y disfrutar de gradientes mediante Javascript. Para ello hace uso de <canvas />, un elemento bastante bien adoptado por todos los navegadores modernos y fácil de parchear para Internet Explorer. Áltamente recomendable. Gracias Jose Antonio.
11
Mar
aNieto2k hace 115 días en: Programacion, javascript, webdev
Detectar caras ya no es solo cosa de Google Images. Ahora tu mismo puedes implementarlo en tu sitio web usando Javascript y las propiedades de canvas.
¿Como funciona?
Para hacerlo funcionar únicamente necesitamos definir 2 ficheros en nuestro <head />.
<script type="text/javascript" src="dat.js"></script>
<script type="text/javascript" src="detector.js"></script>
El fichero dat.js indica la forma a detectar y el fichero detector.js es el que tiene la lógica del script capaz de detectar caras en cualquier foto.
Podemos detectar 1 o varias caras en las fotos, el proceso se convierte más lento dependiendo de cual elegimos (lógico).
1 cara
face_detect_one( document.getElementById("my_canvas") );
Multiples Caras
face_detect_multi( document.getElementById("my_canvas") , progress_callback, result_callback );
function progress_callback( steps_completed, total_steps){
....
}
Respuesta
En la respuesta que las funciones nos devuelve obtenemos los valores de un rectángulo en el que contendremos la cara de la persona.
var my_canvas = document.getElementById("my_canvas");
var result = face_detect_one( my_canvas );
if (result) draw_rect(result, my_canvas);
function draw_rect(r, my_canvas){
var canvas_context = my_canvas.getContext("2d");
canvas_context.strokeRect( r.x, r.y, r.w, r.w );
}
18
Dic
aNieto2k hace 198 días en: Programacion, estandares, javascript, web, webdev
Pixastic es una librería desarrollada en Javascript con la que será posible hacer un Photoshop Online en tu propia web. Usando las propiedades del elemento <canvas /> que únicamente tienen disponible los navegadores como Firefox 2+, Opera 9.5+ y Safari/WebKit con la ultima versión disponible.
Esta librería nos permite aplicarle efectos a nuestras imagenes en tiempo real con una velocidad similar a la que nos ofrecen las herramientas de escritorio. Nos han montado un ejemplo para que podamos verlo funcionando y la verdad es que me ha sorprendido la velocidad con la que se aplicaban los efectos.
var img = document.getElement("myImage"); // get the image element
if (img.complete) { // make sure the image is fully loaded
Pixastic.process(
img,
"brightness", // brightness/contrast adjustment
{ // options object
"brightness" : 60, // set brightness option value to 60
"contrast" : 0.5, // set contrast option value to 0.5,
"rect" : { // apply the effect to this region only
"left" : 100,
"right" : 100,
"width" : 200,
"height" : 150
}
}
)
}
Documentación / Descargar
5
Dic
aNieto2k hace 211 días en: Programacion, javascript, webdev
Técnicamente no es LOGO, pero se le parece. CanvasTurtle es un desarrollado basado en Javascript para manipular elementos canvas y así simular un sistema que inicialmente recuerda el antiguo lenguaje LOGO.
Los tiempos cambian y el pequeño triangulo de LOGO a conseguido mejorar su resolución dejando ver las patitas de la tortuga 
25
Nov
aNieto2k hace 221 días en: Asides, Programacion, javascript, webdev
Si te gusta lo que se está viendo últimamente con <canvas /> y estás pensando el como lo hacen. Quizas este tutorial te ayude a disipar esas dudas.
21
Nov
aNieto2k hace 225 días en: Asides, Programacion, javascript, webdev
Jacob Seidelin nos vuelve a deleitar con una de sus maravillas en Javascript. Esta vez, hace uso de <canvas /> para crear un juego que podría pasar por flash si no fuera posible ver el código fuente de la aplicación.[Demo]
19
Nov
aNieto2k hace 227 días en: Asides, Programacion, javascript, webdev
No tengo otras palabras que describa este ejemplo de canvas 3D que he visto en Ajaxian. Simplemente impresionante [cuidado con el CPU]
29
Oct
aNieto2k hace 248 días en: Programacion, estandares, javascript, web, webdev
Buscando por del.icio.us, he caido en Not The User’s Fault y más concretamente en un experimento de menú radial desarrollado sobre canvas con javascript que nos permite testear la posibilidad de implementar este tipo de menus* en nuestras aplicaciones.
Desde Metalize, hace ya más de año y medio, MeTaL_oRgY nos trajo un desarrollo mediante CSS que nos ofrecía esta posibilidad y vimos que el resultado además de bonito era bastante práctico. ¿Que os parece? ¿Podría ser un sistema de menú a tener en cuenta en nuestras aplicaciones?
* La demo solo funciona sobre Firefox 3
