Cómo dibujar en su página web con la etiqueta HTML 5

los etiqueta establece una parte de la pantalla para ser utilizado como un lienzo para gráficos programa controlado. código javascript se ejecuta todo el dibujo y la manipulación de la imagen. El siguiente código establece una lona elemento y proporciona un botón.

los lona elemento sea poco por su cuenta, usted tiene que usar javascript para extraer una contexto de dibujo (Un elemento especial que se puede extraer en) y utilizar los métodos de ese objeto de contexto para crear gráficos dinámicos. Por ejemplo, para permitir la dibujar()función cuando el usuario hace clic en el botón, utilice este código:

 sorteo function () {var myCanvas = document.getElementById ("myCanvas") Contexto -VAR = myCanvas.getContext ("2d") -context.fillStyle = "azul"-context.strokeStyle = "rojo"-círculo (contexto, 1, 1, 1) -para (i = 1- i lt; = 200- i + = 2) {círculo (contexto, i, i, i, "azul") -círculo (contexto, 300-i, 200-i, i, "rojo") -círculo (contexto, 300-i, i, i, "azul") -círculo (contexto, i, 200-i, i, "rojo") -} // fin para} // círculo drawfunction extremo (contexto, x, y, radio, color) {context.strokeStyle = color-context.beginPath () - context.arc (x, y, radio, 0, Math .PI * 2, true) -context.stroke () -} // fin círculo

La salida de este lona código de sorteo es el siguiente:

La mayoría de los navegadores modernos soportan alguna forma de la etiqueta canvas directamente. Por el momento, solamente un contexto de dibujo 2D está disponible, pero con el tiempo usted será capaz de crear gráficos en 3D directamente en el navegador.

los contexto objeto controla toda la funcionalidad dibujo real. Algunos de los principales métodos de la contexto objeto incluyen:

arco(): dibuja una arco (Parte de un círculo) como parte de un camino. El arco se define como un círculo, con un centro y el radio, pero también con principio y ángulos que terminan. Si los ángulos describen un círculo completo (de 0 a 2 radianes pi veces), el comando arco se dibuja un círculo completo.
beginPath (): Comienza la definición de un camino. Normalmente, un trayecto se define por un solo mover a comando, seguido de una serie de lineTo comandos, y terminado por una carrera, closePath, o llenar.
closePath (): Se conecta el último punto de un camino (dibujado con mover a y lineTo comandos) a la primera, la creación de una forma cerrada que puede ser llenado.
drawImage (): Le permite dibujar una imagen (de un archivo de imagen externo) en el lienzo. Muchas implementaciones permiten la manipulación a nivel de píxeles, lo que permite aplicar filtros y transformaciones personalizadas a las imágenes, lo que permite un control mucho mayor que el típico etiqueta.
llenar(): Este comando (y sus variantes, tales como fillRect) Le permite aplicar el estilo de relleno actual a los elementos dibujados en la pantalla.
fillRect (): Construye un rectángulo de un tamaño y posición especificada, rellenado con el estilo de relleno actual.
fillStyle (): Le permite especificar el estilo de relleno. Esto puede ser un valor de color estándar o un gradiente predefinido.
lineTo (): Junto con moveto de comandos, esto le permite construir un camino en la pantalla. los lineTo comando toma un punto como entrada y se basa en un punto al punto actual previamente definida. Tenga en cuenta que la ruta de acceso no se muestra hasta que la aplicación de la carrera función.
ancho de línea(): Esto define el ancho de la línea que se está dibujado por una carrera mando.
mover a: Se utiliza en la definición de ruta para indicar el punto de partida de un camino.
carrera(): Dibuja la trayectoria definida actualmente. Tenga en cuenta que las rutas no están drawn- inmediatamente el comando de carrera realidad señala a la ruta en la pantalla.
strokeRect (): Dibuja un rectángulo vacío.
strokeStyle (): Determina el estilo del siguiente golpe que se puede extraer. La mayoría de los contextos de dibujo apoyan estilos de trazo de puntos y trazos, pero se esperan más.
texto: Algunas implementaciones de la etiqueta canvas permiten la manipulación de texto. Este apoyo es desigual, pero es probable que se convierta común en futuras implementaciones.

los lona etiqueta es una de las nuevas características 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 usando el lienzo, y ya se ha convertido en la base de varios experimentos innovadores de interfaz de usuario (en particular mapas de Google).