miércoles, 23 de junio de 2010

Dibujo simple con Canvas de HTML 5

Funciona en:
En este tutorial vamos a explicar como crear un dibujo simple con el tag Canvas de HTML 5. Este tutorial funciona en casi todos los navegadores menos en Internet Explorer. Lo primero que aremos crear el tag de Canvas en la parte de web donde queramos el dibujo, dentro del body. Para insertar un Canvas sería asi de simple:
 <body onLoad="dibujo();">
<canvas id="canvas" width="200" height="200">
<p>Su navegador no soporta HTML5</p>
</canvas>
</body>
Como ves en el body hemos añadido un onLoad eso ara que cuando la pagina web haya cargado ejecute la función "dibujo()" (a continuación veremos que contendrá esa función.) Como hemos visto en el codigo crear un canvas es muy simple, solo hay que abrir el tag y dar las medidas. El mensaje que pongamos en el Canvas será el mensaje que se mostrará en el navegador que no soporte Canvas.
El canvas ya estarí acabado ahora tendriamos que crear en el head la función dibujo() entre un tag de javascript:
 <script type="application/x-javascript">
...
</script>
El codigo de la función dibujo() sería el siguiente:
  function dibujo() {
/* Crearemos variable canvas apuntando al canvas creado */
 var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
/* damos el valo de 2D */
     var ctx = canvas.getContext("2d");
/* Damos color al fillStyle con rgb(indicamos los colores con los numeros) */
    ctx.fillStyle = "rgb(200,0,0)";
/* Con fillRect crearemos un rectangulo los numeros correscponden:  */
/* los 2 primeros a las coordenadas y los otros tamaño (x,y,ancho,alto)  */
    ctx.fillRect (10, 10, 55, 50);
/* Damos color igual que en el anterios pero esta vez */
            /*"rgba" añadiendo un numero más */
/*que en este caso serrá la transparéncia */
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
/* Creamos el segundo rectagulo este esta vez con transparéncias. */
    ctx.fillRect (30, 30, 55, 50);
  }
}
El resultado de este tutorial sería así:

12 comentarios:

  1. Me sorprende que no haya ningún comentario.
    Creo que es un tutorial excelente.

    Muchas gracias.

    Sergio.

    ResponderEliminar
  2. Muy bueno, clarito clarito, y lo mejor de todo en ESPAÑOL...

    Muchas gracias

    Samuel

    www.samuelgonzalez.info

    ResponderEliminar
  3. Excelente!!! de verdad es muy bueno muchas gracias por explicar a detalle :)

    ResponderEliminar
  4. Hola,

    el ejemplo tal cual no me funcionaba en ningún navegador, he comprado que es por el tag de Javascript:

    type="application/x-javascript"

    Lo he puesto así, y ya funciona:

    type="text/javascript"


    Saludos!

    ResponderEliminar
  5. Que raro ya lo vi con este mismo codigo, pero no importa, muchas gracias :D

    ResponderEliminar
  6. gracias es exelente ahora a empezar a dibujar por medio de canvas!!!

    ResponderEliminar
  7. Gracias por el tutorial, acabo de empezar a investigar con esto y se ve muy interesante.

    Saludos

    ResponderEliminar
  8. hola...estoy interesado en hacer una pagina web desde 0 y estos ejemplos me dan bastante duro pero seguire aprendiendo muchas gracias por los aportes

    ResponderEliminar
  9. Imposible un tutorial mas claro.
    Felicitaciones, muy bueno el Tuto.

    Saludos!

    ResponderEliminar
  10. exelente acotacion... muchachos... muy util....

    ResponderEliminar