 |
Usuario: Ingresar | 
bits y bytes de tecnología, humor, cine y rebeldía para todos
:: Tecnología para todos :: |
| Dirección URL | http://www.srbyte.com/ Registrado:13-Jul-2008 |
Compartir:
|
|
 Enviar a email | Aprendiendo a usar Canvas en HTML5 en javascriptfirefoxjqueryhtml5canvashtmlmozillacss |  Por BlendBoy@gmail.com (Robertux)
el 07-Apr-2010 | 
HTML5, la nueva versión del lenguaje de marcado para crear páginas web está ya soportado por los últimos navegadores. Esta nueva versión trae muchas novedades a la web y características especiales que antes solo era posible llevarlas a cabo usando Flash. Entre los tags más mencionados son el tag Vídeo, para incrustar y reproducir vídeos nativamente sin necesidad de Flash y el tag Canvas que permite crear y animar gráficos 2D y hasta 3D de forma nativa.
En este artículo demostraremos el uso del tag Canvas, realizando dibujos y un mini paint utilizando CSS y Javascript.
Antes de empezar, cabe mencionar que por el momento no todos los navegadores soportan todas las características de HTML5. Por ejemplo, Internet Explorer es de los que aún no soportan el tag Canvas y por lo tanto no podrán apreciar el demo de canvas que hemos publicado en este post. A continuación una tabla comparativa mostrando las características de HTML5 que soporta cada navegador a la fecha:
Foto 0 en Aprendiendo a usar Canvas en HTML5: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
 "Tabla comparativa mostrando las características de HTML5 soportadas por cada navegador"
Primeramente, debemos crear nuestra página HTML con su respectivo body dentro del cual debemos ubicar nuestro tag Canvas. Este tag no requiere atributos especiales mas que su height y width. Entre la apertura y cierre del tag Canvas puedes incluir cualquier otro contenido HTML el cual le será mostrado al usuario si este utiliza un navegador que no soporte el tag. Esto puede servir como un espacio para mostrar un mensaje indicando la falta de soporte por falta del navegador. También es útil asignarle un ID a dicho tag, para luego poder identificarlo al momento de manipularlo desde Javascript: "Código HTML mostrando el tag Canvas y algunos de sus atributos"
Una vez que tienes el tag, es hora de manipularlo desde Javascript! empecemos por obtener el Context, el cual es el objeto que posee los métodos para dibujar dentro del canvas. Entre estos métodos se encuentran fillFect(), arc(), moveTo(), stroke(), etc. Este objeto Context además tiene una propiedad llamada fillStyle con la cual puedes definirle el color en formato rgb o rgba con el cual se realizarán los trazos.
"Código Javascript obteniendo el objeto Context asociado al objeto DOM Canvas para luego establecer un color vía RGB y pintar un rectángulo"
A continuación mostramos dos ejemplos un poco más elaborados. En el primero, mostramos cómo dibujar una cara feliz y en el segundo cómo asociar los eventos del ratón para pintar sobre el canvas por medio del click. Para ello utilizamos la aplicación web jsFiddle que te permite incrustar HTML, CSS y Javascript al mismo tiempo que se puede apreciar el resultado de dicho código. Además se hace uso de jQuery para simplificar el acceso al objeto DOM Canvas:
"Código HTML, CSS y Javascript para dibujar una cara feliz en el Canvas. Clic en el tab Result para ver el resultado"
"Código HTML, CSS y Javascript para crear una superficie de dibujo en la cual se pinta un cuadro negro por cada clic del ratón. Clic en el tab Result para ver e interactuar con el resultado"
En este link pueden probar Sketchpad, un ejemplo mucho más elaborado de una aplicación web simulando las características de paint.
También en el Mozilla Developer Center pueden encontrar más información y tutoriales sobre el tag canvas y el resto de características HTML5 actualmente soportadas por Mozilla Firefox.
En mi opinión personal, HTML5 permitirá sustituir Flash en un futuro no muy lejano por lo menos en las características que antes solían verse en páginas web como animaciones, reproducción de medios y videojuegos en línea. Es importante aprender desde ya lo que se puede hacer con él y así estar preparados para un futuro en el que este estándar sea utilizado por la mayoría de sitios y la crezca demanda de programadores con dichos conocimientos. 
Leído 11 veces
|
|
 |
| Aprendiendo a usar Canvas en HTML5 | | HTML5, la nueva versión del lenguaje de marcado para crear páginas web está ya soportado por los últimos navegadores. Esta nueva versión trae muchas novedades a la web y [..] Leer nota completa | | Publicado 07-Apr-2010 por BlendBoy@gmail.com (Robertux) en javascriptfirefoxjqueryhtml5canvashtmlmozillacss
Leído 11 veces. Más resultados en    |
|
 | Blogs De Guatemala |  Guatemala | Blogs de Guatemala | Directorio de Blogs, donde los guatemaltecos escriben.
Noticias, información, clima, deportes, poesía, opinión, información Blogs de Guatemala Así se escribe en Guatemala. Directorio de Blogs Guatemaltecos |
| Aprendiendo a usar el FBML | |
El FBML es: Facebook Markup Language
Una aplicación que permite usar y modificar HTML para crear Landing Page
ver ejemplos
¿Y como se hace eso? pregunte, y después de [..] Leer nota completa | | Publicado 30-Dec-2010 por Blogs de en General
Leído 3 veces. Más resultados en |
|
| DM ? Se acaba Lost Canvas | | El conocido manga de la saga Saint Seiya, Saint Seiya Lost Canvas de Masami Kurumada y Shiori Teshirogi que está publicando actualmente en España, Ediciones Glénat acabará su edición original en el próximo número de la revista Weekly Shonen Champion de la editorial Akita Shoten que saldrá a la venta el Jueves 7 de Abril en Japón, así posiblemente la serie tendrá [...] [..] Leer nota completa | | Publicado 28-Mar-2011 por CJ en
Leído 2 veces. Más resultados en |
|
| MyPaint 1.0 Guia parte 1: El canvas y la resolución dinámica | | MyPaint tiene una innovación que quizás surge de la necesidad del autor de no crear menús complejos del tamaño del canvas o sutrato de dibujo y quizás hacerlo de forma más natural para un artista, esto es, que el tamaño que vez en la pantalla es el tamaño que tienes para pintar y si quieres aumentar el tamaño del Canvas, solamente te desplazas hacia arriba o hacia abajo.
Tama [..] Leer nota completa | | Publicado 31-Dec-1969 por Matius Lenin en General
Leído 1 veces. Más resultados en |
|
| Sunsetclan | los llanos | Jmusic,anime, manga, videojuegos ]¦?¦[SunSet Clan ]¦?¦[ Jmusic, videojuegos, cine, anime... |
| Nuevo anime de Saint Seiya Lost Canvas | | Según la revista de Champion Red se confirma que TMS Entertaiment ya está trabajando para pasar la manga Saint Seiya Lost Canvas al anime. Vendrá en forma de Ova(s) y saldrá el año que viene en formato DVD. Ya salieron las imágenes de los modelos de los personajes entre ellos los de Athenea, además salido ya [...] [..] Leer nota completa | | Publicado 13-Dec-2008 por ryuk120 en Entretenimientocomputadora interactivaLightspaceMicrosoftUIST2010
Leído 9 veces. Más resultados en |
|
| Astromono | Panamá | El único blog sabrosawwwn en la web con lo más actual y atorrante en video juegos, comics, cine y la cultura geek que tanto amas, 100% en español! Astromono | El Blog Sabrosawwwn! Bienvenido al feed oficial del único Blog Sabrosawwwn en las Interñetz! Diviértete! |
| Manga de Saint Seiya: The Lost Canvas Llega a su Fin |  El mes de abril será uno triste para los seguidores de Tenma.
La 18va edición de la revista Weekly Shonen Champion de Akita Shoten anunciará el jueves que el popular manga de Masami Kurumada y Shiori Teshirogi, Saint Seiya: The Lost Canvas – Mei? Shinwa, terminará su viaje el próximo 7 de abril. El manga que [...] [..] Leer nota completa | | Publicado 28-Mar-2011 por AstroLander en Anime y Mangaakitashotenmangamasamikurumadasaintseiyathelostcanvasshioriteshirogi
Leído 3 veces. Más resultados en |
|
| Sunsetclan | los llanos | Jmusic,anime, manga, videojuegos ]¦?¦[SunSet Clan ]¦?¦[ Jmusic, videojuegos, cine, anime... |
| Nueva información de Saint Seiya: The Lost Canvas | | Pues salió un poco mas de información sobre estas nuevas OVAs que van a salir de la famosa serie anime Saint Seiya. La primera es que serán al finalmente 12 OVAs, que podría salir en primavera en DVD en el país del sol naciente, Japón. Parece que en cada DVD podrían venir dos, por cada [...] [..] Leer nota completa | | Publicado 05-Feb-2009 por ryuk120 en Anime y mangaSaint Seiya
Leído 7 veces. Más resultados en |
|
| Astromono | Panamá | El único blog sabrosawwwn en la web con lo más actual y atorrante en video juegos, comics, cine y la cultura geek que tanto amas, 100% en español! Astromono | El Blog Sabrosawwwn! Bienvenido al feed oficial del único Blog Sabrosawwwn en las Interñetz! Diviértete! |
| AstroKat Recomienda: Saint Seiya: Lost Canvas Meio Shinwa |  Konnichiwa minna-san! Este es el último AstroKat Recomienda del 2010 y está dedicado a todos ustedes que has seguido esta columna semana tras semana , han comentando (?o no) y en definitiva han disfrutado de cada entrega.(I Love you guys!)
La columna regresa en enero junto con muchas otras cosas nuevas y divertidas que no se [...] [..] Leer nota completa | | Publicado 22-Dec-2010 por AstroKat en
Leído 8 veces. Más resultados en |
|
| Astromono | Panamá | El único blog sabrosawwwn en la web con lo más actual y atorrante en video juegos, comics, cine y la cultura geek que tanto amas, 100% en español! Astromono | El Blog Sabrosawwwn! Bienvenido al feed oficial del único Blog Sabrosawwwn en las Interñetz! Diviértete! |
| Nuevo Trailer de Saint Seiya: The Lost Canvas Pinta un Futuro Incierto | | La segunda temporada de The Lost Canvas arrancó el pasado 23 de febrero con dos episodios y TMS Entertainment ya nos tienta con los dos nuevos episodios.
El OVA de Saint Seiya: The Lost Canvas continuará con los episodios 16 y 17 los cuales estarán disponibles en Japón a partir del 18 de marzo del 2011. [...] [..] Leer nota completa | | Publicado 08-Mar-2011 por AstroLander en Anime y Mangafechassaintseiyathelostcanvastmsentertainmenttrailers
Leído 2 veces. Más resultados en |
|
|
Advertencia YAAQUI.COM no verifica la veracidad de la información publicada y no se responsabiliza
por el uso que se le de a la infomación del contenido publicado en los feeds y weblogs independientes.
Las opiniones vertidas en este sitio no necesariamente son nuestras. Nos reservamos el derecho de
remover cualqueir material que consideremos inconveniente.
|
|
| |
Hola, Invitado
En línea: 120 visitantes
+ fotos
