Imagem a ser usada:
Exemplo
Desenhar a imagem para a tela:
JavaScript:
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
}; Tente você mesmo " Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| drawImage() | sim | 9 | sim | sim | sim |
Definição e Uso
O drawImage() método desenha uma imagem, lona, ou vídeo para a tela.
O drawImage() método também pode desenhar partes de uma imagem, e / ou aumentar / reduzir o tamanho da imagem.
 | Nota: Você não pode chamar o drawImage() método antes de a imagem ter sido carregada. Para garantir que a imagem tenha sido carregado, você pode chamar drawImage() from window.onload() ou a partir de document.getElementById(" imageID ").onload . |
|---|
JavaScript Sintaxe
Posicionar a imagem sobre a tela:
| sintaxe JavaScript: | context.drawImage(img,x,y); |
|---|
Posicionar a imagem na tela, e especificar a largura e altura da imagem:
| sintaxe JavaScript: | context.drawImage(img,x,y,width,height); |
|---|
Clipe da imagem e posicionar a parte cortada na tela:
| sintaxe JavaScript: | context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); |
|---|
Os valores dos parâmetros
| Parâmetro | Descrição | Jogue |
|---|---|---|
| img | Especifica a imagem, lona, ou elemento de vídeo para usar | |
| sx | Opcional. A coordenada x onde começar recorte | Jogue " |
| sy | Opcional. A coordenada y onde começar recorte | Jogue " |
| swidth | Opcional. A largura da imagem cortada | Jogue " |
| sheight | Opcional. A altura da imagem cortada | Jogue " |
| x | A coordenada x onde colocar a imagem na tela | Jogue " |
| y | A coordenada y onde colocar a imagem na tela | Jogue " |
| width | Opcional. A largura da imagem a ser usada (estiramento ou reduzir a imagem) | Jogue " |
| height | Opcional. A altura da imagem a ser usada (estiramento ou reduzir a imagem) | Jogue " |
mais Exemplos
Exemplo
Posicionar a imagem na tela, e especificar a largura e altura da imagem:
JavaScript:
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180);
}; Tente você mesmo " Exemplo
Clipe da imagem e posicionar a parte cortada na tela:
JavaScript:
window.onload = function() {
var c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
var
img=document.getElementById("scream");
ctx.drawImage(img,90,130,50,60,10,10,50,60);
}; Tente você mesmo " Exemplo
Vídeo de usar (pressione Play para iniciar a demonstração):
Lona:
JavaScript (o código desenha o quadro atual do vídeo a cada 20 milissegundos):
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
var ctx=c.getContext('2d');
var i;
v.addEventListener('play',function() {i=window.setInterval(function()
{ctx.drawImage(v,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false); Tente você mesmo "