HTML5 Desenho de imagem no canvas

HTML5 O canvas usa drawImage() para desenhar imagens. Antes de desenhar uma imagem no canvas, é necessário criar um objeto Image e carregar a imagem na memória.

HTML5O canvas possui opções para desenhar imagens nele. Você pode usar drawImage()2Existem várias funções no objeto de contexto do canvas para executar essa operação. Existem três diferentes funções drawImage():

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

O primeiro parâmetro image é a imagem a ser desenhada. Este texto explicará mais tarde como criar e carregar a imagem.
Os parâmetros dx e dy são os curtos 'destinationX' e 'destinationY'. Esses parâmetros determinam a posição onde desenhar a imagem no canvas.
Os parâmetros dw e dh são os curtos 'destinationWidth' e 'destinationHeight'. Esses parâmetros determinam o tamanho da imagem ao ajustar o tamanho ao desenhar.
Os parâmetros sx e sy são os curtos 'sourceX' e 'sourceY'. Esses parâmetros determinam a posição de onde começar a copiar o retângulo da imagem para o canvas.
Os parâmetros sw e sh são os curtos 'sourceWidth' e 'sourceHeight'

Criar e carregar imagem

Antes de desenhar uma imagem no canvas, é necessário criar um objeto Image e carregar a imagem na memória. Este é o método feito com JavaScript:

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

Deve carregar completamente a imagem antes de poder desenhar. Para verificar se a imagem foi completamente carregada, adicione um ouvinte de evento à imagem. Este ouvinte de evento será chamado ao carregar a imagem. Parece assim:

image.addEventListener(' load' drawImage1);

A função drawImage1Os parâmetros são as funções chamadas ao disparar o evento.
Este é um exemplo completo de código que cria, carrega e desenha uma imagem no canvas:

window.onload = function() {
　　　　drawEx1();
}
var image1　= null;
function drawEx1() {
　　　　image1　= new Image();
　　　　image1.src =
　　　　　　　　"https://pt.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 é o resultado do código acima ao desenhar no canvas:

HTML5 Canvas não suportado

ajustar o tamanho da imagem

Como mencionado no início deste texto, você pode ajustar o tamanho da imagem ao desenhar a imagem. Este é um exemplo de código que desenha e ajusta o tamanho da imagem para200 de largura e100 pixels de altura:

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

Este é o aspecto da imagem ao desenhar no canvas, com largura e altura escaladas:

HTML5 Canvas não suportado

Desenhar parte da imagem

Pode-se apenas desenhar uma parte da imagem no canvas. A parte desenhada é o retângulo copiado da imagem. Este é um exemplo 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);

Os parâmetros são sx, sy, sw e sh (sx,sy declara o início do retângulo) imagem, e a largura (sw) e a altura (sh) do retângulo.

Este é o aspecto da imagem retangular ao desenhar no canvas:

HTML5 Canvas não suportado