Cómo dibujar cuadrados y rectángulos en un elemento Canvas de HTML mediante la función fillRect() y strokeRect() de Javascript, válida en HTML 5.
Canvas es uno de los nuevos elementos disponibles en HTML 5, que sirve para dibujar cosas en un lienzo de la página. Ya explicamos este nuevo componente en anteriores artículos de DesarrolloWeb.com, entre los que destacamos la Introducción a Canvas del HTML 5.
Como ya se explicó anteriormente, canvas es un elemento sobre el que dibujamos por medio de sentencias en el lenguaje de programación Javascript. Sin embargo, por el momento todos los navegadores no son compatibles con este nuevo componente, por lo que tendremos que hacer comprobaciones para no ejecutar en los navegadores ninguna instrucción que pueda dar errores por problemas de compatibilidad. Esto también se explicó en el artículo Ejemplo de dibujo con el API de canvas y además se profundizó un poco en anterior artículo a este, cuya lectura también recomendamos, Entender el lienzo de canvas.
En este artículo vamos a explicar cómo podemos utilizar las funciones fillRect() y strokeRect() para dibujar rectángulos en la página y además vamos a implementar una pequeña interacción por medio de un enlace, que al pulsarlo ejecutará una función Javascript para borrar el contenido del canvas con la función clearRect().
Función fillRect()
Esta función, perteneciente al objeto contexto de un elemento canvas, sirve para dibujar rectángulos rellenos de color. Recibe cuatro parámetros, con este esquema:
fillRect(x,y,anchura,altura)Esto dibuja un rectángulo cuya esquina superior izquierda está en el punto (x,y) y cuyas dimensiones son altura x anchura.
El color de relleno no lo especificamos en la propia función, sino que es el color que se tenga configurado en ese momento como color de relleno, que se indica con la propiedad fillStyle del contexto del canvas, asignando por ejemplo el RGB de un color.
Por ejemplo, veamos el siguiente código:
for (i=0;i<=100;i+=10){
contexto.fillRect(i,i,5,5);
}Esto dibujaría una serie de rectángulos, comenzando en la posición (0,0) y continuando con posiciones siempre de 10 píxeles de distancia en ambas coordenadas: (10,10), (20,20) ... Acabando en la coordenada (100,100). Todos los rectángulos serán de 5 píxeles de alto y ancho, luego realmente son cuadrados.
Función strokeRect()
Esta función sirve para dibujar simplemente la silueta de un rectángulo, es decir, sólo su borde. El esquema de parámetros es el siguiente:
strokeRect(x,y,anchura,altura)Dibuja el borde de un rectángulo comenzando en la posición (x,y) para su esquina superior izquierda y con las dimensiones de altura x anchura.
for (i=100;i>=0;i-=10){
contexto.strokeRect(i,100-i,5,5);
}Con el código anterior también dibujamos una serie de cuadrados en el canvas, aunque en esta ocasión sólo la silueta sin estar rellenos de color, de 5 píxeles de anchura y altura y con distintas coordenadas que producimos al hacer el bucle for.
De manera similar, para definir el color del borde del rectángulo, utilizamos la propiedad strokeStyle del objeto del contexto del canvas, a la que podemos asignar el valor RGB que deseemos para el borde de los cuadrados o aquello que vayamos a dibujar en el canvas.
Función clearRect()
Esta función nos sirve para borrar áreas rectangulares de un canvas y hacerlas totalmente transparentes o sin contenido gráfico. Funciona de manera similar a los rectángulos:
clearRect(x,y,anchura,altura)El color aquí no importa mucho, porque es simplemente el color del fondo del contenedor HTML donde hayamos colocado el canvas.
Ejemplo de creación de rectángulos en canvas
Ahora veamos un ejemplo de dibujo de rectángulos en un canvas, que utiliza las funciones comentadas anteriormente.
<html>
<head>
<title>Canvas rectángulos</title>
<script>
//Recibe un identificador del elemento canvas y carga el canvas
//Devueve el contexto del canvas o FALSE si no ha podido conseguise
function cargaContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return FALSE;
}
window.onload = function(){
//Recibimos el elemento canvas
var contexto = cargaContextoCanvas('micanvas');
if(contexto){
//Si tengo el contexto
//cambio el color de relleno de los rectángulos
contexto.fillStyle = '#cc0000';
for (i=0;i<=100;i+=10){
// fillRect(x,y,width,height) dibuja un rectángulo relleno de color
contexto.fillRect(i,i,5,5);
}
//cambio el color de la línea de borde del rectángulo
contexto.strokeStyle = '#ff9933';
for (i=100;i>=0;i-=10){
//strokeRect(x,y,width,height) dibuja el borde de un rectángulo
contexto.strokeRect(i,100-i,5,5);
}
}
}
function borrar_parcial(){
var contexto = cargaContextoCanvas('micanvas');
if(contexto){
//clearRect(x,y,width,height) borra un área rectangular del canvas dejándola transparente
contexto.clearRect(60,0,42,150);
}
}
</script>
</head>
<body bgcolor="#ffff99">
<canvas id="micanvas" width="150" height="150">
Contenido que sólo verán los usuarios que no soportan canvas en su navegador. Usa una versión moderna de Firefox, Chrome, Safari, Opera... casi todos los navegadores excepto Explorer son compatibles con Canvas.
</canvas>
<a href="#" onclick="borrar_parcial()">Borrado parcial</a>
</body>
</html>La función cargaContextoCanvas() ya la explicamos en el anterior artículo y la utilizamos para obtener el objeto de contexto del canvas, o false en caso que el navegador no soporte el trabajo con canvas del HTML 5.
En el evento window.onload definimos una serie de instrucciones que dibujarán una serie de rectángulos justo cuando la página haya terminado de cargarse.
Con la función borrar_parcial() simplemente borramos un área del canvas y a esta función se llama por medio del evento onclick del enlace que hay en la parte de abajo del código.
Podemos ver el ejemplo en marcha en una página aparte.
Esperamos que con estas indicaciones y el anterior ejemplo se haya podido entender correctamente el modo de dibujar rectángulos en un elemento Canvas del HTML 5. En futuros artículos veremos cómo dibujar otros tipos de formas. Quizás lo más complicado para desarrolladores sin experiencia sea la necesidad de trabajar con el lenguaje de programación Javascript, pero recordamos que en DesarrolloWeb.com puedes encontrar una serie de manuales de Javascript que están incluso al alcance de personas que no hayan programado nunca.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...