HTML5 Dibujo de imágenes en el lienzo

HTML5 El lienzo utiliza drawImage() para dibujar imágenes, antes de dibujar imágenes en el lienzo, se debe crear un objeto Image y luego cargar la imagen en la memoria.

HTML5El lienzo tiene opciones para dibujar imágenes en él. Puede usar drawImage()2Se utilizan diversas funciones en el objeto contexto D para realizar esta operación. Hay tres diferentes funciones drawImage():

drawImage(image, dx, dy);
drawImage(image, dx, dy, dw, dh);
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

El primer parámetro image es la imagen que se va a dibujar. Se explicará más adelante cómo crear y cargar la imagen.
En los parámetros dx y dy son los cortos "destinationX" y "destinationY". Estos parámetros determinan la posición en la que se dibuja la imagen en el lienzo.
En los parámetros dw y dh son los cortos "destinationWidth" y "destinationHeight". Estos parámetros determinan el tamaño de la imagen escalada al dibujar.
En los parámetros sx y sy son los cortos "sourceX" y "sourceY". Estos parámetros determinan la posición desde la que comenzar a copiar el rectángulo de la imagen en el lienzo.
En los parámetros sw y sh son los cortos "sourceWidth" y "sourceHeight"

Crear y cargar la imagen

Antes de dibujar la imagen en el lienzo, es necesario crear un objeto Image y luego cargar la imagen en la memoria. Esto se hace con métodos de JavaScript:

var image = new Image();
image.src = "https://es.oldtoolbag.com/en/run/html/canvas-shot.png";

Debe cargar completamente la imagen antes de poder dibujar. Para determinar si la imagen se ha cargado completamente, adjunte un escuchador de eventos a la imagen. Este escuchador de eventos se llamará al cargar la imagen. Se ve así:

image.addEventListener(' load' drawImage1);

El drawImage1Los parámetros son las funciones que se llaman cuando se desencadena un evento.
Este es un ejemplo de código completo que puede crear, cargar y dibujar imágenes en el lienzo:

window.onload = function() {
　　　　drawEx1();
}
var image1　= null;
function drawEx1() {
　　　　image1　= new Image();
　　　　image1.src =
　　　　　　　　"https://es.oldtoolbag.com/en/run/html/canvas-shot.png";
　　　　image1.addEventListener(' load' drawImage1);
}
function drawImage1() {
　　　　var canvas = document.getElementById("ex1");
　　　　var context = canvas.getContext("2d");
　　　　context.drawImage(image1,　10,　10);
}

Este es el resultado del código anterior al dibujar en el lienzo:

HTML5 No se admite Canvas

Escalar la imagen

Como se mencionó al principio de este texto, puede escalar la imagen mientras dibuja. Este es un ejemplo de código que dibuja una imagen y la escala a200 de anchura y100 pixels de altura:

var width =　200;
var height =　100;
context.drawImage(image2,　10,　10, width, height);

Este es el aspecto de la imagen cuando se dibuja en el lienzo, con anchura y altura escaladas:

HTML5 No se admite Canvas

Dibujar una parte de la imagen

Se puede dibujar solo una parte de la imagen en el lienzo. La parte dibujada es el rectángulo copiado de la imagen. Este es un ejemplo de código:

var dx =　10;
var dy =　10;
var dw =　75;
var dh =　75;
var sx =　20;
var sy =　20;
var sw =　75;
var sh =　75;
context.drawImage(image3, sx, sy, sw, sh, dx, dy, dw, dh);

Los parámetros son sx, sy, sw y sh (sx, sy declaran el rectángulo de inicio) la imagen y el ancho (sw) y la altura (sh) del rectángulo.

Este es el aspecto del rectángulo de imagen cuando se dibuja en el lienzo:

HTML5 No se admite Canvas