Métodos para elemento Canvas I

Vamos a comenzar viendo una función para el elemento Canvas de html5 explicado en el post anterior (si no lo has leido, leelo, que te ayudará a comprender la situación de este código fuente). Es una función sencilla pero que da bastante juego, la function draw(). Para declararla, en el apartado del script en el head de nuestra página hay que añadir:

<script>
	function draw()
	{
		[...]
	}
	window.onload = draw;
</script>

Con ello, le decimos al script en cuestión que lo que vamos a realizar es una serie de dibujos en los pixeles que ocupa el canvas. Lo siguiente a realizar es declarar una variable con un nombre, y decirle que va a ser empleada para el elemento canvas y en 2d (por ahora, para empezar…).
Para declarar esta variable usaremos el siguiente código:

<script>
	function draw()
	{
                var can = document.querySelector("canvas").getContext("2d");
		[...]
	}
	window.onload = draw;
</script>

Yo la he llamado “can”, pero el nombre es variable, quiero decir que podéis poner el que más os guste, no va a variar la función, e incluso podremos declarar varias variables.
Lo siguiente a realizar, es llamar con esa variable a alguno de los métodos soportados por el canvas. Dichos métodos pueden ser algunos de los siguientes:

  • arc(x, y, r, iAng, fAng): con este elemento creamos un arco determinado por el punto de comienzo (x,y), el radio del arco (r), y los ángulos de comienzo (iAng) y de fin (fAng)-
  • rect(x, y, w, h): dibujaremos un rectángulo determinado por el punto en el que se situará el vértice superior (x,y), la anchura(w) y la altura(h).
  • clearRect(x, y, w, h): igual que lo anterior, pero en este caso se borrarán todos los píxeles dibujados en el área que determinemos.
  • strokeRect(x, y, w, h): este elemento no le vamos a usar todavía ya que requiere de unas propiedades que veremos en el siguiente post.
  • fillRect(x, y, w, h): igual que el anterior, no le usaremos por el mismo motivo, pero si en el post que viene, que no tardaré en editar tanto como este.
  • arcTo(x1, y1, x2, y2, r): creamos un arco entre dos puntos, el primero es x1, y1 y el segundo será x2, y2 determinado por el radio de dicho arco (r).
  • moveTo(x, y): con él movemos el cursor desde su punto actual hasta el punto x, y pero sin dibujar línea alguna entre dichos puntos.
  • lineTo(x, y): en este caso movemos el cursor desde donde esté hasta el punto x, y pero trazando una línea entre los dos puntos.

Por ahora con estos métodos nos vale, vamos a ver cómo hacer una llamada al método rectángulo desde la variable que hemos declarado anteriormente:

<script>
	function draw()
	{
                var can = document.querySelector("canvas").getContext("2d");
		can.fillRect(10, 20, 100, 50);
	}
	window.onload = draw;
</script>

Como hemos explicado anteriormente, crearemos un rectángulo cuyo punto de inicio es el 10,20, con una anchura de 100 y una altura de 50 pixels.

Si quieres ver un ejemplo de esto, entra en

Ejemplo de elemento canvas (rectángulo)

Lamento la tardanza en escribir este post, el próximo no tardará tanto (problemas técnicos). En el próximo post veremos algunas propiedades del elemento como cambiar el color o grosor de las líneas, el color del relleno… y más cosas útiles.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: