actualmente existe gran demanda de creacion de juegos y aplicaciones multiplataforma "computador/tablet/celular" y flash ya esta dejando de ser soportado en varios sistemas y en celulares es inutin. la alternativa es canvas, pero las librerias no estan destinadas para ello, aunque existen suites muy utiles que basadas en los conceptos de flash te permiten migrar sin traumas. paso 1: tener un IDE enfocado al desarrollo web. podes usar tu favorito "bluefish ajunta" o lo que desees, pero los mas recomendables serian dreamweaver "que es bastante caro y pone tu hardware a gran esfuerzo", o brackets que es gratuito y libre. da click en el boton download, dado que la pagina detecta automaticamente tu sistema http://brackets.io/ paso 2: tener un servidor web para hacer nuestros experimentos, dado que a veces el navegador no lo trata por politicas de seguridad "cross origin content" y nos caeria un problema de este estilo si no desean hacerlo desde un plan de hosting podeis instalar uno local para windows recomiendo WAMP para mac MAMP y para linux LAMP NOTA: esta basado en rfremix 20 el tutorial su digitamos nuestra clave root yum install httpd -y si lo vamos a usar bastante es recomendable tenerle habilitado cada vez que prendes el ordenador systemctl enable httpd.service asi lo veremos dado que mysql cuando oracle compro sun bajo bastante la calidad y te vereis obligado a pagar la version comercial lo ideal es usar una alternativa muy similar mariadb yum install mariadb mariadb-server systemctl enable mysqld.service y ejecutamos mysql_secure_installation segumos las indicaciones que nos salen para tener php # yum install php -y y luego systemctl restart httpd.service ahora ya con el servidor listo empezamos el tutorial librerias requeridas: EaselJS https://code.createjs.com/easeljs-0.8.0.min.js Jquery http://code.jquery.com/jquery-1.11.2.min.js ahora hacemos cierto debugging para poder ver si la estructura base funciona ahora vemos un par de ejemplos veamos el archivo var dregreesToRadian = function (deg) { return deg * Math.PI / 180; }; function init() { var stage = new createjs.Stage("micanvas"); var vector = new createjs.Shape(); vector.graphics.f("rgba(245,66,34,0.9)").dp(0, 0, 55, 5, 0.5, 0); vector.x = 120; vector.y = 111; stage.addChild(vector); var linea = new createjs.Shape(); linea.graphics.beginStroke("green").a(280,120,66,0,dregreesToRadian(140), true ); stage.addChild(linea); stage.update(); } var dregreesToRadian = function (deg) { return deg * Math.PI / 180; }; creamos el vector var vector = new createjs.Shape(); usamos su propiedad graphics para dibujar en nuestro vector linea.graphics.beginStroke("green".arc(280,120,66,0,dregreesToRadian(140), true ); esta parte nos permite convertir grados en radiantes y es bastante importante dado que la API de canvas exige que los datos se den en radianes dado que asociamos la carga de nuestro canvas al evento onLoad creamos su funcion en javascript: seleccionamos el canvas vector.graphics.f("rgba(245,66,34,0.9)".dp(0, 0, 55, 5, 0.5, 0); aca podemos ver que se esta usando la tiny api para ayudar a optimizar la web y lo añadimos al canvas stage.addChild(vector); para poder actualizarle y ver nuestro vector stage.update(); aclaraciones en dep lo configuramos para que signifi que posicion: (0,0) tamaño: 55 nñumero de lados de la estrella: 5 profundidad: 0.5 "gordura": 0 ahora definamos la funcion a linea.graphics.beginStroke("green".a(280,120,66,0,dregreesToRadian(140), true ); posición: 280.120 tamaño del arco 66 ángulo de inicio: 0 Ángulo final: 140º a contrarreloj: si NOTA: tambien podemos definir el color usando esta funcion: getRGB que nos devuelve un array con la informacion del color var color = createjs.Graphics.getRGB(250, 63, 32, 0.8); y en la propiedad f anotamos el nombre de la variable SIN COMILLAS dado que tratamos con una variable nativa ".f(color)" y con algo de tiempo hacemos cosas mas elegantes parte 2 las imagenes var stage; declaramos la variable stage como global, algo que agradeceremos en diseños mas evolucionados $(document).ready(function() { init(); } ); aca usamos a Jquery y le decimos que cuando el documento este listo iniciamos el programa function init() { stage = new createjs.Stage("micanvas"; cargador(); } aca seleecioamos el canvas y llamamos al codigo que trata las imagenes function cargador() { var imagen; imagen = new createjs.Bitmap("imagendeprueba.jpg"; stage.addChild(imagen); stage.update(); setInterval(function() {stage.update();}, 20); } creamos la variable de imagen la definimos la añadimos y le indicamos que lo haga cada 20 milisegundos NOTA: esto es solo una curiosidad y en aprtes ams avanzadas es incomodo formas mas evolucionadas "solo como curiosidad ya que lo correcto es usar a preloadjs" poner la imagen en el DOM la añadimos en el html 
y en el script imagen = new createjs.Bitmap(document.getElementById("foto"); y en el CSS #foto { display: none; } ahora si. la unica forma eficiente fuera de preloadjs, usar el propio DOM function init() { stage = new createjs.Stage("micanvas"); cargador(); } function cargador() { var imagen; imagen = new Image(); imagen.src = "imagendeprueba.jpg"; imagen.onload = function() { gestor(imagen); }; } function gestor(imagen) { var bitmap; bitmap = new createjs.Bitmap(imagen); stage.addChild(bitmap); stage.update(); } la primera función no cambia, sigue definiendo el stage y sigue invocando el cargador nativo. la funcion cargador define la creacion de una imagen en el DOM y que cuando este lista se añada al stage, cosa que hace la funcion gestor NOTA: lo recomendado es usar a preloadjs dado uqe te permite cargar miles de ficheros sin muchas lineas de codigo y con gran potencia, pero para casos pequeños el cargador de DOM sirve resultado: parte 3: textos las variables stage "el canvas", info "el texto" y dimensiones "su medida" son globales dentro de init les damos sus valores. texto dice mira como esta ese texto laaaaargoooo papa, fuente red october stencil y su tamaño 22px alineacion: alfabetica alineacion de texto: a la derecha alto maximo de linea: 30 posicion: en la mitad, recordemos que nuestro canvas mide 640*480 el metodo getbounds nos sirve para saber el tamaño y las coordenadas de un objeto. NOTA: getbounds solo funciona automaticamente para textos porque para imagenes requiere el sourcerect "recorte de la imagen" y para vectores hay que añadirle manualmente ancho máximo permitido: 200 var stage; var info; var dimensiones; stage = new createjs.Stage("micanvas"); info = new createjs.Text("mira como esta ese texto laaaaargooo papa", "22px Red October Stencil", "rgba(221,67,56,0.9)"); info.textBaseline = "alphabetic"; info.textAlign = "right"; info.lineHeight = 30; info.lineWidth = 200; info.name = "texto"; dimensiones = info.getBounds(); console.log(lienzo); info.x = (640-dimensiones.width)/2; info.y = (480-dimensiones.height)/2; stage.addChild(info); stage.update(); y asi veremos esto eventos: aca el programa no nos concede gran ayuda fuera de los eventos de raton. y para otros eventos "touch events", eventos de navegador y eventos de teclado usaremos funcinoes de javascript mas normales o a otras librerias compatibles. pero posee un evento muy importante para animaciones "ticker" y las ideales son: para eventos multitouch: hammerjs http://hammerjs.github.io/dist/hammer.min.js para eventos de teclado: Mousetrap http://craig.is/killing/mice esta nos permite con mas facilidad usar los eventos de teclado para eventos del DOM o del navegador a jquery ahora si volvamos a lo anterior siempre es recomendable usar la propiedad .name para nombrar a nuestros objetos y tratarles info.name = "texto"; porque en los eventos tenemos que acudir a funciones independientes, que exigen que definamos lo que hicimos stage.enableMouseOver(); info.addEventListener("mouseover", alerta); con esto le indicamos que detecte si en raton impacta con los objetos y que escuche el evento mouseover para ejecutar la funcion alerta function alerta() { var infos; infos = stage.getChildByName('texto'); infos.textBaseline = "top"; infos.textAlign = "left"; infos.lineHeight = 30; infos.lineWidth = 200; stage.update(); } nombre de la nueva variable: infos seleccionamos el elemento que antes nombramos como "texto" y le cambianos sus parametros
y en el script imagen = new createjs.Bitmap(document.getElementById("foto"); y en el CSS #foto { display: none; } ahora si. la unica forma eficiente fuera de preloadjs, usar el propio DOM function init() { stage = new createjs.Stage("micanvas"); cargador(); } function cargador() { var imagen; imagen = new Image(); imagen.src = "imagendeprueba.jpg"; imagen.onload = function() { gestor(imagen); }; } function gestor(imagen) { var bitmap; bitmap = new createjs.Bitmap(imagen); stage.addChild(bitmap); stage.update(); } la primera función no cambia, sigue definiendo el stage y sigue invocando el cargador nativo. la funcion cargador define la creacion de una imagen en el DOM y que cuando este lista se añada al stage, cosa que hace la funcion gestor NOTA: lo recomendado es usar a preloadjs dado uqe te permite cargar miles de ficheros sin muchas lineas de codigo y con gran potencia, pero para casos pequeños el cargador de DOM sirve resultado: parte 3: textos las variables stage "el canvas", info "el texto" y dimensiones "su medida" son globales dentro de init les damos sus valores. texto dice mira como esta ese texto laaaaargoooo papa, fuente red october stencil y su tamaño 22px alineacion: alfabetica alineacion de texto: a la derecha alto maximo de linea: 30 posicion: en la mitad, recordemos que nuestro canvas mide 640*480 el metodo getbounds nos sirve para saber el tamaño y las coordenadas de un objeto. NOTA: getbounds solo funciona automaticamente para textos porque para imagenes requiere el sourcerect "recorte de la imagen" y para vectores hay que añadirle manualmente ancho máximo permitido: 200 var stage; var info; var dimensiones; stage = new createjs.Stage("micanvas"); info = new createjs.Text("mira como esta ese texto laaaaargooo papa", "22px Red October Stencil", "rgba(221,67,56,0.9)"); info.textBaseline = "alphabetic"; info.textAlign = "right"; info.lineHeight = 30; info.lineWidth = 200; info.name = "texto"; dimensiones = info.getBounds(); console.log(lienzo); info.x = (640-dimensiones.width)/2; info.y = (480-dimensiones.height)/2; stage.addChild(info); stage.update(); y asi veremos esto eventos: aca el programa no nos concede gran ayuda fuera de los eventos de raton. y para otros eventos "touch events", eventos de navegador y eventos de teclado usaremos funcinoes de javascript mas normales o a otras librerias compatibles. pero posee un evento muy importante para animaciones "ticker" y las ideales son: para eventos multitouch: hammerjs http://hammerjs.github.io/dist/hammer.min.js para eventos de teclado: Mousetrap http://craig.is/killing/mice esta nos permite con mas facilidad usar los eventos de teclado para eventos del DOM o del navegador a jquery ahora si volvamos a lo anterior siempre es recomendable usar la propiedad .name para nombrar a nuestros objetos y tratarles info.name = "texto"; porque en los eventos tenemos que acudir a funciones independientes, que exigen que definamos lo que hicimos stage.enableMouseOver(); info.addEventListener("mouseover", alerta); con esto le indicamos que detecte si en raton impacta con los objetos y que escuche el evento mouseover para ejecutar la funcion alerta function alerta() { var infos; infos = stage.getChildByName('texto'); infos.textBaseline = "top"; infos.textAlign = "left"; infos.lineHeight = 30; infos.lineWidth = 200; stage.update(); } nombre de la nueva variable: infos seleccionamos el elemento que antes nombramos como "texto" y le cambianos sus parametros