En HTML5 , la función canvas drawImage() se usa para mostrar una imagen o video en el lienzo. Esta función se puede utilizar para mostrar la imagen completa o solo una pequeña parte de la imagen. Pero, la imagen debe cargarse primero para cargarla más en el lienzo.
Sintaxis:
context.drawImage(img, x, y, swidth, sheight, sx, sy, width, height);
Valores paramétricos:
- img: Indica la imagen o video a dibujar sobre lienzo.
- x: Indica la coordenada x donde se debe colocar la imagen.
- y: Indica la coordenada y donde se debe colocar la imagen.
- swidth: Es un parámetro opcional e indica el ancho de la imagen recortada.
- sheight: Es un parámetro opcional e indica la altura de la imagen recortada.
- sx: Es un parámetro opcional e indica la coordenada x donde comenzar el recorte.
- sy: Es un parámetro opcional e indica la coordenada y donde comenzar el recorte.
- ancho: Es un parámetro opcional e indica el ancho de la imagen a utilizar.
- altura: Es un parámetro opcional e indica la altura de la imagen a utilizar.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML | canvas drawImage() Method
</title>
</head>
<body>
<p>Image:</p>
<img id="GFG" width="480" height="240"
src="canvas drawImage.png" alt="The Scream" />
<p>Canvas:</p>
<canvas id="myGFGCanvas" width="520" height="300"
style="border: 1px solid #d3d3d3;">
Your browser is not supported
for HTML5 canvas tag.
</canvas>
<script>
window.onload = function () {
var c = document.getElementById("myGFGCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("GFG");
ctx.drawImage(img, 20, 20);
};
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por utkarsh_kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA