¿Quieres saber cómo mejorar la calidad de tus imágenes en la web? ¡El lienzo HTML5 es la solución! En este artículo te enseñaremos todo lo que necesitas saber para optimizar tus imágenes y hacer que tu sitio web se vea profesional y atractivo. ¡No te pierdas esta información esencial de TIEngranaje!
El Lienzo HTML5 le brinda la capacidad de dibujar líneas, formas, texto e imágenes también. En este tutorial, cubriremos el drawImage() método y mostrar algunos ejemplos de cómo este método se puede utilizar para dibujar imágenes en el lienzo de HTML5.
Uso
Para dibujar una imagen en HTML5 Canvas, podemos usar el drawImage() método que requiere un objeto de imagen y un punto de destino. El punto de destino es relativo a la esquina superior izquierda de la imagen. El drawImage() El método requiere un objeto de imagen. En nuestro bloque de JavaScript, debemos crear una imagen y, una vez cargada, dibujamos la imagen en el lienzo de HTML5.
Sintaxis
Dibuja la imagen en el lienzo.
context.drawImage(img,x,y);Dibuje la imagen en el lienzo y especifique el ancho y el alto de la imagen.
context.drawImage(img,x,y,width,height);Recorta la imagen y dibuja la parte recortada en el lienzo.
context.drawImage(img,cx,cy,cwidth,cheight,x,y,width,height);| Parámetro | Descripción |
|---|---|
img |
Especifica la imagen a usar |
sx |
Opcional. La coordenada x donde comenzar a recortar |
sy |
Opcional. La coordenada y donde comenzar a recortar |
swidth |
Opcional. Ancho de la imagen recortada |
sheight |
Opcional. Altura de la imagen recortada |
x |
La coordenada x donde colocar la imagen en el lienzo. |
y |
La coordenada y donde colocar la imagen en el lienzo. |
width |
Opcional. El ancho de la imagen a usar. |
height |
Opcional. La altura de la imagen a utilizar. |
Ejemplos
El primero El ejemplo es el más básico donde la imagen simplemente se dibuja en el elemento del lienzo. El segundo ejemplo dibujará la imagen de acuerdo con las dimensiones proporcionadas. El tercero El ejemplo recorta la imagen y dibuja los resultados.
<canvas id="myCanvas" width="287" height="374">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function () {
context.drawImage(imageObj, 10, 10);
};
imageObj.src="https://www.itgeared.com/html5-canvas-drawing-images-tutorial/monalisa.jpg"
</script>Dibuje la imagen en el lienzo y especifique el ancho y el alto de la imagen.
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function () {
context.drawImage(imageObj, 60, 60, 167, 254);
};
imageObj.src="https://www.itgeared.com/html5-canvas-drawing-images-tutorial/monalisa.jpg"
</script>Recorta la imagen y dibuja la parte recortada en el lienzo.
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function () {
context.drawImage(imageObj, 70, 5, 125 ,125, 19, 62, 250, 250);
};
imageObj.src="https://www.itgeared.com/html5-canvas-drawing-images-tutorial/monalisa.jpg"
</script>