« Volver
in asp.net html5 read.

[HTML5] Canvas I – Trazos y figuras.

Hola, hace buen rato que no escribía nada sobre HTML5, así que con este post quiero retomar el tema, y la idea es con algunos post sobre como trabajar con el Canvas, así que vamos a comenzar definiendo el canvas con una superficie de dibujo, con el canvas podemos entre otras cosas:

· Dibujar líneas y figuras geométricas

· Trabajar con texto

· Trabajar con gradientes

· Trabajar con audio y video

· Realizar animaciones

· Realizar juegos

· Y mucho más…

Para iniciar, una definición muy simple del canvas puede ser una superficie de dibujo rectangular, y dicho rectángulo tiene unas coordenadas (x,y), la siguiente imagen ilustra este tema:

Ahora ya entrando en materia, para crear el canvas utilizamos la etiqueta , un ejemplo sería:

1: <canvasid=”canvas1style=”border:1pxGraySolidheight:400px; width:400px;”> 2: <p>Tu explorador no soporta el canvas… please update!p> 3: canvas>

Al canvas anterior le definimos un id (para luego accederlo utilizando JavaScript) y unas propiedades css, lo que esta dentro del canvas (en este caso un párrafo) solo se mostrará si el explorador no lo soporta.

Bueno y ahora si a trabajar con el canvas, en este post revisaremos como dibujar líneas y algunas figuras como rectángulos, círculos y arcos.

Lo primero que se debe hacer para cualquier tipo de acción con el canvas es obtener una referencia al elemento y luego definir su contexto:

1: var canvas = document.getElementById('canvas1'); 2: var contexto = canvas.getContext('2d')

Las dos líneas anteriores simplemente primero obtienen una referencia al elemento y luego le definimos el contexto para trabajar, de acá en adelante usaremos el contexto para dibujar.

Ahora para dibujar líneas tenemos varias funciones, algunas de ellas son:

· moveTo(x,y): Nos ubica en la posición (x,y) dentro del canvas, aca no se dibuja nada.

· lineTo(x,y): Realiza una línea desde la posición actual hasta el punto (x,y).

· lineWidth: Específica el grosor de la línea.

· strokeStyle: Color de la línea, es posible especificarlo en formato hexadecimal, rgb(a) o por el nombre del color.

Y finalmente para que las líneas se dibujen debemos hacer un llamado a contexto.stroke(), de lo contrario no se pintará nada. Ahora si quisiéramos hacer algo como lo de la imagen:

Imagen1

Lo que podríamos hacer es:

1: //Obtener el elemento 2: var canvas = document.getElementById('canvas1'); 3: //Definir contexto 4: var contexto = canvas.getContext('2d'); 5:  6: var i; 7: for (i = 0; i <= 300; i += 30) 8: { 9: contexto.moveTo(i,0); 10: contexto.lineTo(i,300); 11: 12: contexto.moveTo(0,i); 13: contexto.lineTo(300,i); 14: } 15: contexto.strokeStyle = 'rgba(228,42,190,0.2)'; 16: contexto.lineWidth = 2; 17: contexto.stroke();

Y ahora para dibujar un rectángulo:

1: contexto.fillRect(x0, y0, ancho, alto); 2: contexto.fillStyle = color;

Y si fuera un circulo:

1: contexto.arc(x, y, radio, anguloInicial, anguloFinal, false); 2: contexto.fillStyle = color de relleno; 3: contexto.fill(); 4: contexto.lineWidth = ancho de línea; 5: contexto.strokeStyle = color; 6: contexto.stroke();

Espero les sea de utilidad este post, y pendientes porque vienen más post sobre el canvas, como siempre les dejo el código del ejemplo:

Descarga el ejemplo!

comments powered by Disqus