tutoriais mais recente desenvolvimento web
 

HTML canvas drawImage() Method

<Object Canvas

Imagem a ser usada:

O grito

Exemplo

Desenhar a imagem para a tela:

YourbrowserdoesnotsupporttheHTML5canvastag.

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 "

Exemplos

mais Exemplos

Exemplo

Posicionar a imagem na tela, e especificar a largura e altura da imagem:

YourbrowserdoesnotsupporttheHTML5canvastag.

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:

YourbrowserdoesnotsupporttheHTML5canvastag.

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:

yourbrowserdoesnotsupportthecanvastag

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