Imagem a ser usada:
Exemplo
Desenhar a imagem para a tela:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
Tente você mesmo " Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente o método.
Método | |||||
---|---|---|---|---|---|
drawImage() | 4.0 | 9 | 3,6 | 4.0 | 10.1 |
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.
JavaScript Sintaxe
Posicionar a imagem na 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 grampeamento | 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 de imagem que pretende utilizar (stretch or reduce the image) | Jogue " |
height | Opcional. A altura da imagem a ser usada (stretch or reduce the image) | Jogue " |
mais Exemplos
Exemplo
Posicionar a imagem na tela, e especificar a largura e altura da imagem:
JavaScript:
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:
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 (press Play to start the demonstration) :
Tela de pintura:
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");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var 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 " <Object Canvas