Cómo incluir imágenes en su página web con el canvas de html5

Mientras que HTML ha tenido mucho apoyo para las imágenes, las lona interfaz de HTML5 añade una nueva vida a imágenes Web. Las imágenes pueden visualizarse en un lienzo, en el que se pueden integrar con las técnicas de dibujo vectorial de la API de canvas. También puede seleccionar una parte de una imagen para mostrar, y aplicar diversas transformaciones a su imagen para crear composiciones y animaciones interesantes.

Esta figura muestra una imagen dibujada dos veces en un elemento canvas.

Dibujo de una imagen en el lienzo HTML5

La forma más fácil de usar una imagen en un elemento canvas es utilizar una imagen ya disponible en la página Web. Se puede poner una imagen en la página con la ordinaria etiquetar y utilizar el CSS display: none regla para crear la imagen invisible. Un enfoque alternativo es crear una Imagen objeto en javascript y aplicar el src atribuir a conectar esa imagen a un archivo de imagen específico. Para ejemplos de ambas técnicas, considere el siguiente código HTML:

No se admite la lona

El siguiente código javascript muestra la imagen en el lienzo:

 función draw () {dibujo var = document.getElementById ("dibujo") Con -VAR = drawing.getContext ("2d") -VAR goofyPic = document.getElementById ("goofyPic") -con.drawImage (goofyPic, 0, 0, 50, 50) -VAR imagen2 = new Image () - = image2.src "andyGoofy.jpg"-con.drawImage (image2, 100, 100, 70, 50) -} // sorteo final

He aquí cómo hacerlo:

1. Crear la imagen en la página principal.

   La forma más fácil de acceder a una imagen es utilizar HTML estándar para incrustar la imagen en la página principal. Si lo desea, puede ocultar la la etiqueta con el código CSS (display: none) por lo que sólo la versión de la tela es visible.

2. Crear una variable de javascript para la imagen con el document.getElementById () mecanismo.

3. Dibujar la imagen en el lienzo con la drawImage () función.

   El primero de los cinco parámetros es el nombre de un objeto de imagen. (Debe ser el nombre de una imagen objeto de javascript, no sólo el nombre de archivo de una imagen.) Los siguientes dos parámetros son los valores X e Y de la esquina superior izquierda de la imagen, y los dos últimos parámetros son el tamaño de la imagen (anchura y altura).

4. Crear un javascript Imagenobjeto.

   Si no desea incrustar una imagen en la página, puede utilizar javascript para crear una imagen dinámica. Utilizar el nueva imagen() constructor para construir una nueva imagen.

5. Cambiar la imagen de srcpropiedad.

   Si crea una imagen de javascript, se debe especificar el src atributo para indicar el archivo asociado a la imagen. Podría tomar algún tiempo para que la imagen se cargue.

La imagen no se mostrará hasta que se haya cargado desde el servidor. En la mayoría de los casos, esto no será un problema, pero a veces es necesario retrasar su programa hasta que la imagen se ha terminado de cargar. los Imagen objeto tiene una onload propiedad que acepta una función de devolución de llamada. Utilice esta técnica que esperar hasta que los acabados de dibujo:

image.onload = finishDrawing funciones finishDrawing () {// resto de dibujo de código va aquí}

Dibujo parte de una imagen en el lienzo HTML5

A veces se desea dibujar una pequeña parte de la imagen original. Un programa que se centra en el centro de la cara tonta se ve así:

Es bastante fácil dibujar parte de una imagen. Utilizar el mismo drawImage () mando, pero esta vez utilice una versión con nueve parámetros:

con.drawImage (goofyPic, 60, 70, 90, 90, 0, 0, 150, 150) -

Esto es lo que significan todos estos parámetros:

• Nombre de la imagen: El primer parámetro es el objeto de la imagen (no el nombre del archivo, pero el nombre del javascript Imagen objeto).

• esquina de la fuente superior izquierda: El primer trabajo es elegir la parte de la imagen original para mostrar. Los siguientes dos parámetros indican la esquina superior izquierda de una selección en la imagen original. (Es posible utilizar un editor de imágenes como Gimp o IrfanView para determinar la posición y el tamaño de la selección.)

• La altura y la anchura de fuente: Los siguientes dos parámetros indican la altura y la anchura de la selección de fuente.

• Posición de destino: Los siguientes dos parámetros son la posición de la esquina superior izquierda de la imagen en el lienzo.

• Tamaño de destino: Los dos últimos parámetros describen la altura y la anchura de la imagen de destino en el lienzo.

La técnica subimagen se describe aquí es bastante útil, ya que permite combinar varias imágenes en una sola imagen (a veces llamada hoja de sprites). Esto disminuye la sobrecarga para la entrega de la imagen. (Una imagen de gran tamaño es más rápida que la de entregar varios pequeños.) También se utiliza con frecuencia en los juegos y animaciones donde una entidad puede tener varias imágenes que se muestran secuencialmente para sugerir caminar o atacar.