La clave para llegar a tener estructuras fuertes son los cimientos, para ello debemos tener bases fuertes y bien definidas, por ello para poder llegar a utilizar a su máxima capacidad el elemento Canvas primero debemos conocer a fondo los aspectos básicos y por ello vamos a empezar a dibujar formas básicas, con ello aprenderemos como funcionan los diferentes métodos de dibujo y luego podremos realizar composiciones más complejas.
Dibujar un rectángulo
El rectángulo es una figura muy sencilla que consta de 4 lados, veamos los métodos que tenemos disponibles para poder dibujarlo en el Canvas:
En este ejemplo vemos que definimos algunas variables, donde le decimos el offset o limite donde iniciará los rectángulos, el tamaño y luego un var count que nos servirá de contador para hacer las repeticiones, por lo que vemos en la siguiente sección sabemos que haremos rectángulos de forma dinámica, veamos como se dibujan en nuestro navegador:
Hemos hecho dos filas de 5 rectángulos cada uno, si nos fijamos en el código habíamos llamado a los métodos fillRect() primero para los rectángulos rellenos y luego a strokeRect para los no rellenos.
Utilizando el método clearRect()
¿Que tal si ahora queremos limpiar una parte de los rectángulos rellenos? Para ello tenemos el método clearRect(), en el siguiente código veremos como funciona:
Por cada repetición aplicamos un llamado al método clearRect() y al hacer el algoritmo hemos hecho que pase por todo el centro de los rectángulos rellenos, veamos en la siguiente imagen como queda en nuestro navegador:
Aquí podemos ver como hemos limpiado un área que antes habíamos dibujado.
Con esto finalizamos este tutorial donde hemos podido ver un poco más a fondo algunos métodos que podemos utilizar para dibujar en nuestro elemento Canvas.
Dibujar un rectángulo
El rectángulo es una figura muy sencilla que consta de 4 lados, veamos los métodos que tenemos disponibles para poder dibujarlo en el Canvas:
- clearRect(x, y, w, h): Limpia un rectángulo o una parte de un rectángulo previamente especificado.
- fillRect(x, y, w, h): Se utiliza para dibujar un rectángulo con relleno.
- strokeRect(x, y, w, h): Se utiliza para dibujar un rectángulo sin relleno.
- x y son los limites del borde superior izquierdo del rectángulo.
- w h corresponden al ancho y la altura respectivamente.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {border: thin solid black; margin: 4px}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
Su navegador no soporta el elemento <code>canvas</code>
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var offset = 10;
var size = 50;
var count = 5;
for (var i = 0; i < count; i++) {
ctx.fillRect(i * (offset + size) + offset, offset, size, size);
ctx.strokeRect(i * (offset + size) + offset, (2 * offset) + size,
size, size);
}
</script>
</body>
</html>
En este ejemplo vemos que definimos algunas variables, donde le decimos el offset o limite donde iniciará los rectángulos, el tamaño y luego un var count que nos servirá de contador para hacer las repeticiones, por lo que vemos en la siguiente sección sabemos que haremos rectángulos de forma dinámica, veamos como se dibujan en nuestro navegador:
Hemos hecho dos filas de 5 rectángulos cada uno, si nos fijamos en el código habíamos llamado a los métodos fillRect() primero para los rectángulos rellenos y luego a strokeRect para los no rellenos.
Utilizando el método clearRect()
¿Que tal si ahora queremos limpiar una parte de los rectángulos rellenos? Para ello tenemos el método clearRect(), en el siguiente código veremos como funciona:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {border: thin solid black; margin: 4px}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
Su navegador no soporta el elemento <code>canvas</code>
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var offset = 10;
var size = 50;
var count = 5;
for (var i = 0; i < count; i++) {
ctx.fillRect(i * (offset + size) + offset, offset, size, size);
ctx.strokeRect(i * (offset + size) + offset, (2 * offset) + size,
size, size);
size, size);
ctx.clearRect(i * (offset + size) + offset, offset + 5, size, size -10);
}
</script>
</body>
</html>
Por cada repetición aplicamos un llamado al método clearRect() y al hacer el algoritmo hemos hecho que pase por todo el centro de los rectángulos rellenos, veamos en la siguiente imagen como queda en nuestro navegador:
Aquí podemos ver como hemos limpiado un área que antes habíamos dibujado.
Con esto finalizamos este tutorial donde hemos podido ver un poco más a fondo algunos métodos que podemos utilizar para dibujar en nuestro elemento Canvas.
