Manual de referência HTML

大全 de tags HTML

HTML: <template> etiqueta

Método drawImage() do HTML canvas

O método drawImage() oferece várias maneiras de desenhar imagens no Canvas.

Manual de referência do canvas do HTML

Imagem a ser usada:

Exemplo Online

Desenhar uma imagem na tela:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uso do método drawImage() do HTML canvas-Tutorial Básico(oldtoolbag.com)</title>
</head>
<body>
<p>Imagem a ser usada:</p>
<img id="scream" src="views.png">
<p>Canvas:</p>
<canvas id="myCanvas" width="300"height="200"style="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
var img=document.getElementById("scream");
img.onload = function()
{
　　　　ctx.drawImage(img,10,10);
}
</script>
</body>
</html>

Testar para ver ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome e Safari suportam drawImage() Método.

Atenção:Internet Explorer 8 E as versões anteriores não suportam o elemento <canvas>.

Definição e uso

O método drawImage() desenha a imagem, o canvas ou o vídeo na tela.

O método drawImage() também pode desenhar uma parte da imagem e/ou aumente/Reduza o tamanho da imagem.

Sintaxe JavaScript

Localize a imagem na tela:

Sintaxe JavaScript:	context.drawImage(img,x,y);

Localize a imagem na tela e defina a largura e a altura da imagem:

Sintaxe JavaScript:	context.drawImage(img,x,y,width,height);

Corte a imagem e localize a parte cortada na tela:

Sintaxe JavaScript:	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Valor do parâmetro

Parâmetro	Descrição
img	Define a imagem, o canvas ou o vídeo a ser usado.
sx	Opcional. A posição x do eixo X onde o corte começa.
sy	Opcional. A posição y do eixo Y onde o corte começa.
swidth	Opcional. A largura da imagem cortada.
sheight	Opcional. A altura da imagem cortada.
x	Coloque a posição x do eixo X da imagem na tela.
y	Posição y da imagem no canvas.
width	Opcional. Largura da imagem a ser usada (estender ou reduzir a imagem).
height	Opcional. Altura da imagem a ser usada (estender ou reduzir a imagem).

Exemplo Online

Localize a imagem no canvas e defina a largura e altura da imagem:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uso do método drawImage() do HTML canvas-Tutorial Básico(oldtoolbag.com)</title>
</head>
<body>
<p>Imagem a ser usada:</p>
<img id="scream" src="views.png">
<p>Canvas:</p>
<canvas id="myCanvas" width="250"height="300"style="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
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);
}
</script>
</body>
</html>

Testar para ver ‹/›

Exemplo Online

Recorte a imagem e localize a parte recortada no canvas:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uso do método drawImage() do HTML canvas-Tutorial Básico(oldtoolbag.com)</title>
</head>
<body>
<p>Aplicação de imagem:</p>
<img id="scream" src="views.png">
<p>Canvas:</p>
<canvas id="myCanvas" width="300"height="150"style="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
document.getElementById("scream").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);
};
</script>
</body>
</html>

Testar para ver ‹/›

Exemplo Online

Vídeo a ser usado (pressione o botão de reprodução para começar o demo):

Canvas:

JavaScript (cada 20 milissegundos, o código desenha o frame atual do vídeo):

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uso do método drawImage() do HTML canvas-Tutorial Básico(oldtoolbag.com)</title>
</head>
<body>
<p>Vídeo a ser usado:</p>
<video id="video1"controls width="270"autoplay>
　　　　<source src="movie.mp4"type='video/mp4'>
　　　　<source src="movie.ogg" type='video/ogg#39;>
　　　　<source src="movie.webm" type='video/webm#39;>
</video>
<p>Canvas (o código está em cada20 milissegundos para desenhar o frame atual do vídeo):</p>
<canvas id="myCanvas" width="270"height="135"style="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
var　v=document.getElementById("video",1");
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);　　
</script>
</body>
</html>

Testar para ver ‹/›

Manual de referência do canvas do HTML

HTML: <template> etiqueta