El elemento de lienzo HTML permite al usuario dibujar gráficos en cualquier página web. Es como un contenedor de gráficos para dibujar los gráficos, JavaScript se usa en el código.
<canvas id="Canvas1" width="100" height="100"></canvas>
Los siguientes son los atributos para crear un lienzo. También se pueden agregar más atributos opcionales. El lienzo es referido en JavaScript por su id.
Método drawImage(): este método se puede utilizar para dibujar una imagen o un vídeo en la página web. También se puede utilizar para dibujar partes de una imagen. Otra función útil es aumentar o disminuir el tamaño de la imagen.
Recortar una imagen usando el método drawImage() : para recortar una imagen de origen a su imagen de destino. se deben especificar los siguientes parámetros de drawImage().
- imagen: La imagen a recortar.
- sourceX: la coordenada x de la imagen de origen
- sourceY: la coordenada y de la imagen de origen.
- sourceW: El ancho de la imagen de origen.
- sourceH: la altura de la imagen de origen.
- DestinationX: la coordenada x de la imagen de destino.
- destinoY: la coordenada y de la imagen de destino.
- DestinationW: El ancho de la imagen de destino.
- DestinationH: la altura de la imagen de destino.
Sintaxis:
drawImage(image, sourceX, sourceY, sourceW, sourceH,
destinationX,destinationY, destinationW, destinationH)
Ejemplo:
javascript
<!DOCTYPE html>
<html>
<head>
<title>
How to crop image
using canvas?
</title>
</head>
<body>
<h2>Source Image</h2>
<img id="myImage" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200615165012/double_quotes.jpg"
alt="GeeksForGeeks">
<h2>Cropped Image</h2>
<canvas id="myCanvas" width="500" height="200"
style="border:3px solid">
HTML5 canvas tag is not
supported by your browser.
</canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("myCanvas");
var contex = canvas.getContext("2d");
var img = document.getElementById("myImage");
contex.drawImage(img, 10, 10,
300, 175, 0, 0, 100, 175);
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por srishtirajani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA