Propiedades para elemento Canvas I

En el post anterior vimos una serie de métodos con los que conseguimos realizar dibujos en los píxeles del elemento canvas de html5. Pues bien, hoy veremos unas propiedades para modificar algunas cosas de esos métodos. Al igual que los métodos, las propiedades hay que llamarlas desde la variable que queremos modificar. Las distintas propiedades que veremos por ahora son:

  • lineCap = [round | square | butt]: empleado para determinar el estilo del comienzo y fin de las líneas. Siendo butt el empleado por defecto, round un acabado en redondo y square un acabado similar al butt pero sobrepasando un poco el punto de inicio y de fin en función del ancho de la línea dibujada…
  • lineJoin = [round | miter | bevel]: empleado para determinar el estilo de las esquinas de las líneas en sus uniones con otras líneas. Miter es la empleada por defecto, el ángulo es un ángulo recto en caso de un cuadrado por ejemplo. Con el valor round conseguimos esquinas redondeadas y con el bevel hacemos estas esquinas biseladas.
  • lineWidth = numero: determinamos gracias a esta propiedad el ancho de las líneas del dibujo.
  • fillStyle = color: para establecer el color del relleno de la figura.
  • strokeStyle = color: para establecer el color del contorno de la figura o dibujo.
  • miterLimit = numero: determinaremos el número límite de esquinas que puede tener una línea.
  • shadowColor = color: para casos en los que le queramos realizar una sombra a nuestra figura o dibujo. Como sabemos por html5, las sombras se realizan por un conjunto de colores (si quieres saber más de esto, entra en: Manuales online de HTML5 )
  • shadowBlur = además de un conjunto de colores, tienen unos valores de ancho, largo y desenfoque, pues éste sería el valor deseado para el desenfoque de la sombra.
  • shadowOffsetX = numero: como hemos dicho antes, éste sería el valor horizontal o del eje X de la sombra.
  • shadowOffsetY = numero: y éste sería el del eje Y.

Una vez vistas y explicadas estas propiedades, pasaremos a realizar un ejemplo de rectángulo línea a línea (si no habéis visto los 2 post anteriores, os recomiendo leerlos puesto que así os será mas sencillo de comprender el ejemplo) al que le añadiremos unas propiedades como un ancho de línea y unas uniones o esquinas biseladas:

<script>
	function draw()
	{
		var can = document.querySelector("canvas").getContext("2d");
		can.lineJoin = 'bevel';
		can.lineWidth = '17';
		can.moveTo(20,40);
		can.lineTo(120,40);
		can.lineTo(120,90);
		can.lineTo(20,90);
		can.lineTo(20,50);
		can.stroke();
	}
	window.onload = draw;
</script>

Creo que no hay nada más que explicar de éste código fuente ya que si no en este, en posts anteriores está todo detallado. Si quieres ver cómo quedaría, entra en: Ejemplo rectángulo línea a línea elemento canvas
En el próximo post nos adentraremos algo más en éste curioso elemento de html5 y trataremos de sacarle el máximo rendimiento.

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: