Manual de referencia de HTML

Completo de etiquetas HTML

HTML: <template> etiqueta

Método drawImage() de HTML canvas

El método drawImage() ofrece varias formas de dibujar imágenes en Canvas.

Manual de referencia de canvas HTML

Imagen a usar:

Ejemplo en línea

Dibujar una imagen en el lienzo:

Ejemplo

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">-8">
<title>Uso del método drawImage() de HTML canvas-<title>教程 básico (oldtoolbag.com)</title>
</head>
<body>
<p>Imagen a usar:</p>/p>
<img　id="scream"　src="views.png">
<p>lienzo:</p>/p>
<canvas　id="myCanvas"　width="300" height="200" style="border:1px sólido #d3d3d3>
Su navegador no admite 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>

Prueba aquí ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome y Safari admiten drawImage() Método.

Nota:Internet Explorer 8 Las versiones anteriores no admiten el elemento <canvas>.

Definición y uso

El método drawImage() dibuja la imagen, lienzo o video en el lienzo.

El método drawImage() también puede dibujar una parte de la imagen y/o aumentar/Reducir el tamaño de la imagen.

Sintaxis de JavaScript

Ubique la imagen en el lienzo:

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

Ubique la imagen en el lienzo y especifique el ancho y la altura de la imagen:

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

Corte la imagen y ubique la parte cortada en el lienzo:

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

Valor del parámetro

Parámetros	Descripción
img	Define la imagen, lienzo o video a usar.
sx	Opcional. La posición del eje x de inicio del corte.
sy	Opcional. La posición del eje y de inicio del corte.
swidth	Opcional. El ancho de la imagen cortada.
sheight	Opcional. La altura de la imagen cortada.
x	Coloque la posición del eje x de la imagen en el lienzo.
y	Posición y en el lienzo de la imagen.
width	Opcional. Ancho de la imagen a usar (estira o reduce la imagen).
height	Opcional. Altura de la imagen a usar (estira o reduce la imagen).

Ejemplo en línea

Coloque la imagen en el lienzo y especifique el ancho y la altura de la imagen:

Ejemplo

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">-8">
<title>Uso del método drawImage() de HTML canvas-<title>教程 básico (oldtoolbag.com)</title>
</head>
<body>
<p>Imagen a usar:</p>/p>
<img　id="scream"　src="views.png">
<p>lienzo:</p>/p>
<canvas　id="myCanvas"　width="250" height="300" style="border:1px sólido #d3d3d3>
Su navegador no admite 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>

Prueba aquí ‹/›

Ejemplo en línea

Corte de imagen, y coloque la parte cortada en el lienzo:

Ejemplo

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">-8">
<title>Uso del método drawImage() de HTML canvas-<title>教程 básico (oldtoolbag.com)</title>
</head>
<body>
<p>Aplicación de imagen:</p>/p>
<img　id="scream"　src="views.png">
<p>lienzo:</p>/p>
<canvas　id="myCanvas"　width="300" height="1500" style="border:1px sólido #d3d3d3>
Su navegador no admite 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>

Prueba aquí ‹/›

Ejemplo en línea

Video a usar (presione el botón de reproducción para comenzar la demostración):

Lienzo:

JavaScript (cada 20 milisegundos, el código dibujará el fotograma actual del video):

Ejemplo

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">-8">
<title>Uso del método drawImage() de HTML canvas-<title>教程 básico (oldtoolbag.com)</title>
</head>
<body>
<p>Video a usar:</p>/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> lienzo (el código se encuentra en cada20 milisegundos para dibujar el fotograma actual del video):</p>
<canvas　id="myCanvas"　width="270" height="135" style="border:1px sólido #d3d3d3>
Su navegador no admite 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>

Prueba aquí ‹/›

Manual de referencia de canvas HTML

HTML: <template> etiqueta