El método canvas drawImage() de la API Canvas 2D se usa para dibujar una imagen de varias formas en un elemento canvas. Este método tiene parámetros adicionales que se pueden usar para mostrar la imagen o una parte de la imagen.
Sintaxis:
context.drawImage(img, x, y, swidth, sheight, sx, sy, width, height);
Acercarse:
- Agrega una imagen usando la etiqueta <img>.
- Dibuja el lienzo usando la etiqueta <canvas>.
- Cargue el lienzo y obtenga el contexto.
- Seleccione la imagen a utilizar,
- Dibuje la imagen junto con parámetros opcionales adicionales, si es necesario.
Ejemplo 1: en este ejemplo, la posición de la imagen en el lienzo se establece mediante parámetros adicionales.
html
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p>Image:</p>
<img id="gfg_image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200604000733/gfg199.png" />
<p>Canvas:</p>
<canvas id="myGFGCanvas" width="500" height="300"
style="border: 5px solid black">
</canvas>
<script>
window.onload = function () {
// Get the canvas element from the page
var canvas = document.getElementById("myGFGCanvas");
// Get the 2D context of the canvas
var ctx = canvas.getContext("2d");
// Get the image to be drawn on the canvas
var image = document.getElementById("gfg_image");
// Draw the image using drawImage() function
// The first parameter is the image to be drawn
// The second and third parameter is the
// x and y position of the image in the canvas
ctx.drawImage(image, 100, 20);
};
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, la posición y las dimensiones de la imagen se establecen mediante parámetros adicionales.
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p>Image:</p>
<img id="gfg_image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200604000733/gfg199.png" />
<p>Canvas:</p>
<canvas id="myGFGCanvas" width="500" height="300"
style="border: 5px solid black">
</canvas>
<script>
window.onload = function () {
// Get the canvas element from the page
var canvas = document.getElementById("myGFGCanvas");
// Get the 2D context of the canvas
var ctx = canvas.getContext("2d");
// Get the image to be drawn on the canvas
var image = document.getElementById("gfg_image");
// Draw the image using drawImage() function
// The first parameter is the image to be drawn
// The second and third parameter is the
// x and y position of the image in the canvas
// The fourth and fifth parameter is the
// width and height of the image to be drawn
// in the canvas
ctx.drawImage(image, 20, 20, 400, 200);
};
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA