epespad

Empezando a dibujar en Canvas html 5 tutorial

En el articulo anterior hablamos acerca de lo que es HTML5 y Canvas y de lo que podriamos llegar a hacer con el API de canvas.

Pues ya sabiendo que es HTML5 y Canvas creo que podriamos pasar a poder hacer dibujos con el API de Canvas pero para esto es requerido algunos conocimientos basicos de :

Javascript.
Dependiendo de lo que quieras crear seran los conocimientos que requieras de este lenguaje, ya que con este programaremos o mejor dicho sera el engine que mueva a Canvas para hacer las Animaciones y efectos (Recomiendo leer un tutorial de Javascript acerca de las condificiones aunque sea). Aunque cada cosa igualmente sera explicada.

Html.
Acerca de este lenguaje es muy facil no requieren muchos conocimientos ya que yo mismo explicare todo lo necesario de este.


El primer paso seria colocar el elemento HTML canvas.

Ahora empezemos colocando la etiqueta html cavas, recuerden que en el articulo anterior hablamos de un editor de texto como en mi caso yo uso dreamweaver.



<canvas id="micanvas" width="200" height="100">
</canvas>

Como podran haber visto el codigo HTML es casi igual a XML para los que han este tipo de archivos, pues donde canvas es la etiqueta ( <canvas> </canvas> ) y sus atributos son id, width, y height.

Atributo id:
Para asignarle un nombre único y luego referirnos a este canvas desde Javascript.

Atributos width y height:
Para indicar la anchura y altura del área del canvas.

Tambien se pueden agregar otros atributos de forma facil si saben conocimientos HTML pero estos atributos son los unicos necesarios para empezar a dibujar.



Dibujar en un canvas con Javascript

Existen muchas funciones ya listas para poder dibujar en canvas, y se pueden usar todas para crear dibujos o animaciones mas avanzadas. ( si no sabes acerca de las funciones o no tienes ni idea de que es una te recomiendo buscar infomacion de como crear funciones en Javascript, Aunque repito yo explicare cada paso y como se hace ).
pero antes de entrar con esto necesitamos saber si el navegador es compatible con CANVAS.

Como les explique antes acerca de la etiqueta canvas es un lugar donde podemos dibujar, por ejemplo cuando vamos a empezar a hacer un dibujo buscamos una hoja en blanco igualmente de esta manera Canvas iniciara todo en blanco para que podamos empezar a dibujar.
( Imaginense que canvas es un lugar donde tu puedes dibujar lo que quieres de forma libre en los pixeles que tu elijas de los atributos width, y height ) De esa manera lo miro yo!.



//Recibimos el elemento canvas
var canvas = document.getElementById('micanvas');

//Accedo al contexto de '2d' de este canvas, necesario para dibujar
var contexto = canvas.getContext('2d');

//Dibujo en el contexto del canvas
contexto.fillRect(50, 0, 10, 150);




Primero con el método getElementById() obtengo el elemento de la página que se pasa como parámetro, que es el canvas. Luego accedo al contexto 2D del canvas, que es el que tiene varios métodos que sirven para dibujar en el lienzo. Por último puedo ejecutar tantos métodos como desee sobre el contexto del canvas para pintar elementos en el lienzo.

Como decía, estas sentencias Javascript no son compatibles con todos los navegadores, por lo que habrá que hacer unas comprobaciones básicas, para saber si ejecutar o no las distintas instrucciones de dibujo.Veamos este código, un poco más elaborado, que hace las comprobaciones necesarias para no hacer nada en el caso que el navegador no sea compatible con canvas.


//Recibimos el elemento canvas
var elemento = document.getElementById('micanvas');
//Comprobación sobre si encontramos un elemento
//y podemos extraer su contexto con getContext(), que indica compatibilidad con canvas
if (elemento && elemento.getContext) {
//Accedo al contexto de '2d' de este canvas, necesario para dibujar
var contexto = elemento.getContext('2d');
if (contexto) {
//Si tengo el contexto 2d es que todo ha ido bien y puedo empezar a dibujar
//Comienzo dibujando un rectángulo
contexto.fillRect(0, 0, 150, 100);
//cambio el color de estilo de dibujo a rojo
contexto.fillStyle = '#cc0000';
//dibujo otro rectángulo
contexto.fillRect(10, 10, 100, 70);
}
}



El código está comentado para que se pueda entender más fácilmente.

Ahora sólo falta una última cosa, que es ejecutar estas acciones sólo cuando la página esté cargada por completo y lista para recibirlas. Esto lo conseguimos con la el evento onload del body de la página:

<body onload="funcionDeDibujo()">


Claro que tendremos que crear la funcionDeDibujo() con el código anterior para operar con el canvas.
O bien podemos utilizar este otro recurso para asignar el evento directamente desde un script Javascript.

DesarrolloWeb.com > Manuales > Manual de Canvas del HTML 5
Ejemplo de dibujo con el API de canvas
03 de noviembre de 2009
Compartir en redes sociales
Valoración del artículo:
0 votos
Enviar un comentario
Un primer ejemplo de dibujo en un elemento canvas de HTML 5 con el API de canvas y Javascript.
Por Miguel Angel Alvarez
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
En el artículo anterior explicamos qué era el elemento canvas del HTML 5, así que podemos pasar a ver un primer ejemplo de utilización del mismo para que los lectores de DesarrolloWeb.com puedan ir conociendo este nuevo sistema.

Para comenzar realizaremos un ejemplo de dibujo de dos rectángulos con distintos colores, que realizaremos utilizando el un par de funciones del API de dibujo en canvas mediante Javascript. Claro que el elemento canvas tiene muchas cosas que debemos conocer para ir soltándonos en su manejo, pero al menos podremos ver una primera prueba para ir abriendo boca.

El ejemplo se basa en dos partes, primero una en la que colocaremos un lienzo canvas en un lugar de nuestra página, con la etiqueta HTML "CANVAS" y luego otra parte en la que dibujaremos dentro de ese elemento los rectángulos con programación Javascript. Sobra decir que harán falta unos conocimientos al menos básicos de Javascript para poder trabajar con el canvas.
Colocar el elemento HTML canvas
Ahora comencemos situando dentro del cuerpo de la página la etiqueta CANVAS. Esta etiqueta, como decíamos forma parte del estándar del HTML 5.

<canvas id="micanvas" width="200" height="100">
Este texto se muestra para los navegadores no compatibles con canvas.
<br>
Por favor, utiliza Firefox, Chrome, Safari u Opera.
</canvas>

El elemento tiene apertura y cierre y entre medias podemos escribir un texto que será lo que vean los usuarios que entren con navegadores que no soporten la etiqueta CANVAS.

Para especificar las características de este canvas tenemos varios atributos:

Atributo id:
Para asignarle un nombre único y luego referirnos a este canvas desde Javascript.

Atributos width y height:
Para indicar la anchura y altura del área del canvas.

Otros atributos se pueden colocar de manera opcional, como por ejemplo style, para indicar atributos de hojas de estilo para definir el aspecto del lienzo.
Pintar en un canvas mediante Javascript
Existen diversas funciones ya listas para dibujar formas y trazados en un canvas. Nosotros podemos combinarlas para hacer dibujos más complejos. Pero en este caso vamos a empezar dibujando un par de sencillas formas. No obstante, como veremos también, debemos hacer antes unas comprobaciones para saber si el navegador que está ejecutando esta página es compatible con canvas.

Inicialmente el canvas está en blanco y cuando queremos pintar sobre él tenemos que acceder al contexto de renderizado del canvas, sobre el que podremos invocar distintos métodos para acceder a las funciones de dibujo. El proceso simplificado sería el siguiente:

//Recibimos el elemento canvas
var canvas = document.getElementById('micanvas');

//Accedo al contexto de '2d' de este canvas, necesario para dibujar
var contexto = canvas.getContext('2d');

//Dibujo en el contexto del canvas
contexto.fillRect(50, 0, 10, 150);

Primero con el método getElementById() obtengo el elemento de la página que se pasa como parámetro, que es el canvas. Luego accedo al contexto 2D del canvas, que es el que tiene varios métodos que sirven para dibujar en el lienzo. Por último puedo ejecutar tantos métodos como desee sobre el contexto del canvas para pintar elementos en el lienzo.

Como decía, estas sentencias Javascript no son compatibles con todos los navegadores, por lo que habrá que hacer unas comprobaciones básicas, para saber si ejecutar o no las distintas instrucciones de dibujo.Veamos este código, un poco más elaborado, que hace las comprobaciones necesarias para no hacer nada en el caso que el navegador no sea compatible con canvas.

//Recibimos el elemento canvas
var elemento = document.getElementById('micanvas');
//Comprobación sobre si encontramos un elemento
//y podemos extraer su contexto con getContext(), que indica compatibilidad con canvas
if (elemento && elemento.getContext) {
//Accedo al contexto de '2d' de este canvas, necesario para dibujar
var contexto = elemento.getContext('2d');
if (contexto) {
//Si tengo el contexto 2d es que todo ha ido bien y puedo empezar a dibujar
//Comienzo dibujando un rectángulo
contexto.fillRect(0, 0, 150, 100);
//cambio el color de estilo de dibujo a rojo
contexto.fillStyle = '#cc0000';
//dibujo otro rectángulo
contexto.fillRect(10, 10, 100, 70);
}
}

El código está comentado para que se pueda entender más fácilmente.

Ahora sólo falta una última cosa, que es ejecutar estas acciones sólo cuando la página esté cargada por completo y lista para recibirlas. Esto lo conseguimos con la el evento onload del body de la página:

<body onload="funcionDeDibujo()">

Claro que tendremos que crear la funcionDeDibujo() con el código anterior para operar con el canvas.

O bien podemos utilizar este otro recurso para asignar el evento directamente desde un script Javascript:


window.onload = function(){
//instrucciones de dibujo en canvas
}


El código completo de nuestro primer ejemplo de uso de canvas sería el siguiente:


<html>
<head>
<title>Probando canvas</title>
<script>
window.onload = function(){
//Recibimos el elemento canvas
var elemento = document.getElementById('micanvas');
//Comprobación sobre si encontramos un elemento
//y podemos extraer su contexto con getContext(), que indica compatibilidad con canvas
if (elemento && elemento.getContext) {
//Accedo al contexto de '2d' de este canvas, necesario para dibujar
var contexto = elemento.getContext('2d');
if (contexto) {
//Si tengo el contexto 2d es que todo ha ido bien y puedo empezar a dibujar en el canvas
//Comienzo dibujando un rectángulo
contexto.fillRect(0, 0, 150, 100);
//cambio el color de estilo de dibujo a rojo
contexto.fillStyle = '#cc0000';
//dibujo otro rectángulo
contexto.fillRect(10, 10, 100, 70);
}
}
}

</script>
</head>

<body>

<canvas id="micanvas" width="200" height="100">
Este texto se muestra para los navegadores no compatibles con canvas.
<br>
Por favor, utiliza Firefox, Chrome, Safari u Opera.
</canvas>

</body>
</html>


Fuentes : desarrolloweb.com

Estos tutoriales son para ir aprendiendo a usar CANVAS para despues empezar con los tutoriales de creacion de juegos y animaciones con CANVAS.

Siguiente tutorial :

http://www.taringa.net/posts/ciencia-educacion/10432745/Entendiendo-la-API-CANVAS-HTML5.html

Por Favor comentar.. Gracias

8 comentarios - Empezando a dibujar en Canvas html 5 tutorial

_Lendar_
Buen post, amigo! Me encantaria podes diseñar juegos como varios de los que jugamos y conocidos xD Como sea, te felicito por el post! Si fuera NFU te daria +10
_Lendar_
Si pudieras poner imagenes, para ubicarme porque estoy mas perdido.. xDDDD
gundream
+10, sigue haciendo tutoriales, están muy bien
koomedor
pone el titulo en minúsculas para que no te borren el post
Erick102
toda esa informacion solo para recalcar es de Desarrolloweb.com
keytdeblin
buen post y como dice erick102 es de desarrolloweb.com pero la verdad es quien sabia eso ya los taringeros solo estamos en taringa laakajkajka lo que si en el post falta la fuente
JhCc91 +1
es mejor usar svg que canvas ya que svg tiene su editor tipo paint y te genera el codigo del dibujo y solo lo pegas en tu html.