Métodos de dibujo vectorial en Canvas de HTML 5

En el post anterior sobre canvas mostramos la parte esencial para dibujar dentro de canvas. En este post mostraremos otros métodos para crear diferentes elementos. Pero antes de llegar a esta parte hablaremos un poco del área de dibujo.

Como en muchas otras herramientas y técnicas de dibujo en dos dimensiones, el canvas utiliza un cuadrante de un plano cartesiano, siendo la esquina superior izquierda el punto donde los ejes X (horizontal) y Y (vertical) se encuentran en cero. Si nos movemos hacia la derecha, los valores en X son positivos. Lo mismo ocurre con el eje Y al movernos hacia abajo.

Volviendo a la última línea del código anterior, en el que se creó un rectángulo con relleno rojo, analicemos gráficamente lo que realiza.

contexto.fillRect(80,100,100,50);

canvasdibujo1

No importa en dónde se encuentre el canvas, siempre se definirá la posición del dibujo a partir de su esquina superior izquierda. Es importante resaltarlo, ya que para otras características de javascript, como la posición del puntero, se mide desde la esquina superior izquierda del navegador.

Dibujo de contorno (strokeStyle y strokeRect())

Si lo que deseamos es dibujar contornos en lugar de rellenos, es muy sencillo. Simplemente se define un estilo de contorno usando la propiedad strokeStyle y después algún método que comience con stroke en lugar de fill. Por ejemplo, para hacer un rectángulo de las mismas dimensiones que el anterior en contorno, se utilizarían el siguiente código:

contexto.strokeStyle = "#0000ff";
contexto.strokeRect(200,100,100,50);

Tendríamos el siguiente resultado:

canvasdibujo2

Como mera demostración, el rectángulo azul se dibujó a un lado del anterior. No habría problema en haber puesto los mismos parámetros para dibujar el contorno azul encima del relleno rojo.




Opción para borrar (clearRect())

En muchas ocasiones va a resultar muy útil borrar alguna región del canvas. Para ello existe el método clearRect, el cual lleva los mismos parámetros que los anteriores.

En el siguiente ejemplo vamos a borrar un pedazo de ambos rectángulos, utilizando el siguiente código:

contexto.clearRect(130,110,110,30);

canvasdibujo3

Dibujo de líneas rectas (moveTo() y lineTo())

No todo en el canvas es rectangular, ni tampoco figuras cerradas. También se pueden dibujar líneas. Empecemos por las rectas, las cuales piden menos parámetros. Sin embargo, antes de dibujar la línea se debe establecer el punto de inicio. Sería como indicar el punto donde la pluma o el lápiz hace el primer contacto. Esto se hace con el método moveTo(), el cual tiene de parámetros las coordenadas x y y a donde se colocará. Vamos a seguir sobre la misma posición de 100 en vertical que los otros elementos y empezaremos un poco a la derecha del rectángulo en contorno.

contexto.moveTo(320,100);

Ahora, para hacer líneas rectas se utiliza lineTo(), con los mismos parámetros. Lo que realiza este método es una linea desde el punto anterior definido en un moveTo() o un lineTo(). Se pueden utilizar los lineTo() que hagan falta. En este caso haremos dos líneas, las cuales dibujaremos primero en contorno con el método stroke(). Las líneas se dibujan en azul, ya que es el color que definimos con fillStyle

contexto.lineTo(420,100);
 contexto.lineTo(320,150);
 contexto.stroke();

canvasdibujo4

De manera interesante, si añadimos el método fill() veremos que la figura se cierra, creando un triángulo.

contexto.fill();

canvasdibujo5

Dibujo de líneas curvas (bezierCurveTo(), quadraticCurveTo())

Para dibujar lineas curvas, además de indicar la coordenada hacia donde termina el trazo se deben de añadir las coordenadas para los puntos de control que definen la curva. El método quadraticCurveTo() permite un punto de control, mientras que bezierCurveTo() permite dos.

Sobre el código anterior, vamos a definir un nuevo punto de inicio para el dibujo. Este será alineado con el rectángulo rojo en la posición X, y 200 en Y para dejar espacio con relación a los elementos ya dibujados.

contexto.moveTo(80,200);

Posteriormente, haremos un trazo que se mueva 100 pixeles en ambos ejes con relación hacia este punto, o sea a 180 en x y 300 en Y. Previos a estos números, se define el punto de control, el cual pondremos en la misma posición en Y que el punto de inicio de la línea y separado en X 100 pixeles. El código de quadraticCurveTo() queda de la siguiente manera.

contexto.quadraticCurveTo(180,200,180,300);

canvasdibujo6

Para hacer la figura con bezierCurveTo, volveremos a mover el punto de inicio con moveTo() para luego definir dos puntos de control. El primero arrastrará la curva de nuevo a la derecha, mientras que el segundo, el que sale desde el punto destino de la línea, lo moverá a la derecha.

contexto.moveTo(200,200);
contexto.bezierCurveTo(300,200,200,300,300,300);
contexto.fill();

canvasdibujo7

Dibujo de arcos (arc())

Si bien usando los métodos anteriores se podrían dibujar círculos o segmentos de estos, existe un método más sencillo, llamado arc(). Este tiene una serie de parámetros (6) los cuales son diferentes a los que hemos visto. Los primeros dos son también para definir las coordenadas de inicio, solo que son del centro de la circunferencia. El tercer parámetro es para el tamaño del radio, mientras que el cuarto y el quinto definen los ángulos de inicio. Mucha atención con estos, ya que se definen en radianes y no en grados. Finalmente el último parámetro, llamado anticlockwise, sirve para definir si el arco se dibujara hacia el lado de las manecillas del reloj (false), o al opuesto (true).

En la última parte del código, haremos un arco que mide un radian (poco más de 57 grados) y que se hace hacia el lado opuesto al giro de las manecillas, por lo que nos genera un pequeño trozo de pie.

contexto.moveTo(400,250);
contexto.arc(400,250,50,0,1,false);
contexto.fill();

canvasdibujo9

Simplemente cambiando el parámetro 6 a true, obtenemos un pacman.

contexto.arc(400,250,50,0,1,true);

canvasdibujo10

Conclusión

Los métodos de dibujo del elemento canvas de HTML 5 nos permiten realizar una amplia variedad de elementos. Seguramente al principio resultarán difícil y abstracto tratar de realizarlos sin tener de referencia un cuaderno de cuadrícula. Esa sería una primera recomendación, apoyarse con algún dibujo a mano o con algún software como Photoshop para darse una idea. Poco a poco, con práctica, va a resultar más fácil, lo cual nos ayudará a realizar actividades más elaboradas e interesantes.




El código completo del ejercicio es el siguiente:

<!doctype html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Dibujo en canvas</title>
<style>
#elCanvas{
 background-color:#FC3;
 border:1px solid black; 
}
</style>
<script>
function dibujar(){
 var contexto = document.getElementById("elCanvas").getContext("2d");
 //Dibujar rectangulo de relleno rojo
 contexto.fillStyle = "#ff0000";
 contexto.fillRect(80,100,100,50);
 //Dibujar rectángulo de contorno azul
 contexto.strokeStyle = "#0000ff";
 contexto.strokeRect(200,100,100,50);
 //Borrar una región rectangular
 contexto.clearRect(130,110,110,30);
 //Lineas rectas
 contexto.moveTo(320,100);
 contexto.lineTo(420,100);
 contexto.lineTo(320,150);
 contexto.stroke();
 contexto.fill();
 //linea curva con quadraticCurveTo
 contexto.moveTo(80,200);
 contexto.quadraticCurveTo(180,200,180,300);
 contexto.fill();
 //linea curva con bezierCurveTo
 contexto.moveTo(200,200);
 contexto.bezierCurveTo(300,200,200,300,300,300);
 contexto.fill();
 //Arcos
 contexto.moveTo(400,250);
 //trozo de pie
 //contexto.arc(400,250,50,0,1,false);
 //pac man
 contexto.arc(400,250,50,0,1,true);
 contexto.fill();
}
</script>
</head>

<body onLoad="dibujar()">
<canvas id="elCanvas" width="500" height="500">
Tu navegador no entiende HTML 5
</canvas>
</body>
</html>

Descarga el material de trabajo.

También puedes ver este tutorial en Youtube

Be the first to comment

Leave a Reply

Your email address will not be published.


*