Cargando

Ir a contenido

X


Ver Más! Si eres de los que necesita y disfruta con la edición y conversión de vídeos 4K y VR, Wondershare Video Converter Ultimate es tu programa. Haz clic en el enlace!


 


HTML5 - Dibujando en el Canvas

En este tutorial vamos a ver diferentes aspectos de dibujo en el elemento Canvas, haciendo énfasis en sus formas más básicas con relleno y sin relleno.


Escrito por el feb 09 2014 05:58


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:
  • 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.
Como habremos notado los métodos anteriores todos utilizan 4 argumentos, dichos argumentos corresponden a lo siguiente:
  • x y son los limites del borde superior izquierdo del rectángulo.
  • w h corresponden al ancho y la altura respectivamente.
Veamos un ejemplo simple para que podamos poner en practica estos elementos:

<!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:



html5_dibujando_canva.jpg


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:



html5_dibujando_canva2.jpg


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.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado feb 09 2014 05:58
  •   Actualizado feb 17 2014 09:48
  •   Visitas 768
  •   Nivel
    Profesional