Latest web development tutorials

drawImage tela HTML () Método

HTML Manual de lona Referência HTML Manual de lona Referência

Para usar a imagem:

o grito

Exemplos

Para tirar uma foto no topo da tela:

Seu navegador não suporta HTML5 tag canvas.

JavaScript:

var c = document.getElementById ( "myCanvas");
var ctx = c.getContext ( "2d");
var img = document.getElementById ( "Scream");
img.onload = function () {
ctx.drawImage (IMG, 10,10);
}

tente »

Suporte a navegadores

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari apoio drawImage () método.

Nota: 8 e versões anteriores do Internet Explorer não suportam o elemento <canvas>.

Definição e Uso

drawImage () para desenhar uma imagem, vídeo ou tela na tela.

Certas porções a drawImage () método também pode desenhar a imagem, e / ou aumentar ou diminuir o tamanho da imagem.

sintaxe JavaScript

Posicionando a imagem sobre a tela:

sintaxe JavaScript: contexto .drawImage (IMG, x, y);

Posicionando a imagem sobre a tela, e uma largura pré-determinada e a altura da imagem:

sintaxe JavaScript: contexto .drawImage (IMG, x, y, largura, altura);

Cortar imagem e localizar a parte cortada na lona:

sintaxe JavaScript: contexto .drawImage (img, sx, sy, swidth, sheight, x, y, largura, altura);

parâmetro Valor

parâmetros descrição
img Predeterminado imagem, lona ou vídeo que você deseja usar.
sx Opcional. Começar a cortar a coordenada x da posição.
sy Opcional. Comece cortar coordenadas y.
swidth Opcional. É a largura da imagem de corte.
sheight Opcional. Altamente cortar imagem.
X Lugar x posição da imagem na tela de coordenadas.
y Coloque y coordenadas da posição da imagem na tela.
largura Opcional. Para utilizar a largura da imagem (, aumentando ou diminuindo a imagem).
altura Opcional. A altura da imagem que você deseja usar (por esticar ou encolher a imagem).

Exemplos

mais exemplos

Exemplos

Na tela do posicionamento da imagem, em seguida, especifique a largura e altura da imagem:

Seu navegador não suporta HTML5 tag canvas.

JavaScript:

var c = document.getElementById ( "myCanvas");
var ctx = c.getContext ( "2d");
var img = document.getElementById ( "Scream");
img.onload = function () {
ctx.drawImage (img, 10,10,150,180);
}

tente »

Exemplos

Cortar a imagem, e na tela das porções cortadas são posicionados:

Seu navegador não suporta HTML5 tag canvas.

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 »

Exemplos

Vídeo que você deseja usar (Pressione o botão PLAY para iniciar a demonstração):

canvas:

Seu navegador não suporta a tag canvas

JavaScript (a cada 20 milissegundos, o código irá desenhar um quadro atual de vídeo):

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 ( 'terminou', function () {clearInterval (i);}, false);

tente »

HTML Manual de lona Referência HTML Manual de lona Referência