Canvas
Temario
- Elemento Canvas
La etiqueta <canvas> establece una parte de la pantalla para gráficos de control programado. El código HTML simplemente deja a un lado una parte de la pantalla para ser utilizado como un lienzo. Todo el dibujo y la manipulación de la imagen se realiza a través de código JavaScript.
<!DOCTYPE html><html><head><script type="text/javascript">function draw(){var myCanvas = document.getElementById("myCanvas");var context = myCanvas.getContext("2d");context.fillStyle = "blue";context.strokeStyle = "red";circle(context, 1, 1, 1);for (i = 1; i <= 200; i+= 2){circle(context, i, i, i, "blue");circle(context, 300-i, 200-i, i, "red");circle(context, 300-i, i, i, "blue");circle(context, i, 200-i, i, "red");} // end for} // end drawfunction circle(context, x, y, radius, color){context.strokeStyle = color;context.beginPath();context.arc(x, y, radius, 0, Math.PI * 2, true);context.stroke();} // end circle</script></head><body><canvas id = "myCanvas" width = "300" height = "200">This example requires HTML5 canvas support</canvas><button type = "button" onclick = "draw()">click me to see a drawing</button></body>
</html>
Por el momento, sólo hay un contexto de dibujo 2D, pero se preeve un contexto para dibujo en 3D que permitirá a los gráficos directamente en el navegador.
El objeto "context" controla todas las funciones de dibujo actual. Éstos son algunos de los principales métodos del objeto "context":
- arc():
- El comando "arc" dibuja un arco (parte de un círculo), como parte de un camino.
- El arco se define como un círculo, con un centro y un radio, pero con un inicio y din de angulo
- Si los ángulos describen un círculo completo (de 0 a 2 x pi radianes), el comando "arc" dibujara un círculo completo.
- beginPath():
- Este comando inicia la definición de un camino.
- Normalmente, una ruta de acceso se define por un solo comando moveTo, seguido de una serie de comandos LineTo, y terminado por un strocke, closePath, o fill.
- closePath():
- Este comando se conecta con el último punto de un camino a la primera, creando una figura cerrada que pudiera ser rellenada.
- drawImage():
- El comando "drawImage", le permite dibujar una imagen (de un archivo de de imagen externo) en el elemento <canvas>.
- Muchas implementaciones permiten la manipulación a nivel de píxeles, lo que permite aplicar filtros y transformaciones personalizadas a sus imágenes, dándole mucho mayor control que la etiqueta típica <img>.
- fill():
- El comando "fill" o de relleno (y sus variantes - como fillRect) permite aplicar el estilo de relleno a elementos dibujados en la pantalla.
- fillRect():
- Este comando construye un rectángulo de un tamaño y una posición definida.
- fillStyle():
- Permite especificar el estilo de relleno. Esto puede ser un valor de color estándar, o un gradiente predefinido.
- lineTo():
- Este comando (junto con el comando moveTo) le permite construir un camino en la pantalla.
- El comando lineTo toma un punto como entrada y se basa en un punto previamente definido en el punto actual.
- Tenga en cuenta que la ruta de acceso no se muestra hasta que la aplicación de la función strocke.
- lineWidth():
- Define la anchura de la línea que se está dibujado por un comando strocke.
- moveTo:
- Utilizado en la definición de la ruta, se utiliza el comando moveTo para indicar el punto de partida de un camino.
- stroke():
- Este comando también traza la trayectoria definida. Tenga en cuenta que los caminos no son inmediatamente atraídos, el comando de trazo en realidad señala la ruta en la pantalla.
- strokeRect():
- Este comando dibuja un rectángulo vacío.
- strokeStyle():
- Determina el estilo del siguiente trazo en ser dibujado. La mayoría de los contextos de dibujo apoyan estilos de puntos y líneas discontinuas, pero se esperan aun más estilos.
- text:
- Algunas implementaciones de la etiqueta canvas permiten la manipulación de texto.
La etiqueta canvas es una de las novedades más importantes de HTML5, ya que permite un control casi ilimitado de la interfaz visual. Los desarrolladores de juegos han comenzado a crear juegos en línea que utilizan el lienzo, y ya se ha convertido en la base de varios experimentos inovadores (en particular, los mapas de Google.)
Para obtener más información sobre la programación del elemento canvas, visite http://dev.w3.org/html5/canvas-api/canvas-2d-api.html.
No hay comentarios:
Publicar un comentario