Dibujar un rectángulo en un Canvas con HTML5

30/Jun/2012 HTML5 , , 2 Comentarios

Ya hemos visto como podemos dibujar una línea en un Canvas con HTML5, ahora vamos a dibujar un rectángulo dentro del Canvas.

Lo primero como cualquier código que vaya a manejar el Canvas con HTML5 será el crear el elemento Canvas dentro de la página. Para ello utilizamos el elemento canvas.

  1. <canvas height="300px" width="300px" id="micanvas">
  2. Su navegador no soporta en elemento CANVAS</canvas>

Ahora ya pasamos al generar el código Javascript que accede al canvas. En este caso hay que obtener la referencia al canvas. Para ello utilizamos los métodos .getElementById y .getContext. El primero es bastante conocido (si no te es familiar revisa la información del getElementById) y el segundo nos permite acceder al lienzo del canvas, sobre el cual vamos a dibujar un rectángulo con HTML5.

  1. var canvas = document.getElementById("micanvas");
  2. var ctx = canvas.getContext("2d");

Para dibujar un rectángulo vamos a utilizar el método .fillRect. Sus parámetros son muy sencillos. Son 4 valores, los dos primeros representan la esquina superior izquierda. Es decir, de dónde parte el dibujo del rectángulo. Los dos siguientes representan el ancho y el alto del rectángulo respectivamente.

El código sería el siguiente:

  1. ctx.fillRect(10,10,200,200);

En este caso hemos creado un rectángulo de 200x200 que se dibuja desde la coordenada 10,10.

Si queremos podemos cambiar el color del rectángulo. Para ello tenemos a nuestra disposición la propiedad .fillStyle. A dicho método le pasaremos el valor en RGB del color que queramos utilizar. Por ejemplo, para poner el rectángulo en rojo escribiremos lo siguiente:

  1. ctx.fillStyle="#f00";

Ya tenemos dibujado nuestro rectángulo en rojo dentro del Canvas de HTML5.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*