Parameter description:
drawImage(image, x, y) //Draw according to the original image size.
drawImage(image, x, y, width, height) //Draw at the specified size.
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight) //Usually used for image cropping.
Among them:
image: the image to be drawn. This must be an Image object representing markup or an offscreen image, or a Canvas element.
x and y: the coordinate position of the image in the document.
width and height: the width and height of the image.
For drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight), it is often used to crop images. The meaning of its parameters is as follows:
start from a certain position (sourceX, sourceY) on the original image, specify the length and width to cut (sourceX, sourceY), and then put the cut content at the position (destX, destY), and the width is (destWidth), the height is (destHeight), of course, the cropped one will cover the original picture.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>drawImage</title>
</head>
<body>
<canvas id="myCanvas" width="1800" height="1000"></canvas>
<script type="text/javascript">
var canv=document.getElementById("myCanvas");
var ctx = canv.getContext("2d");
img = new Image();
img.src = "./dy.jpg";
//当图片加载完毕的时候在drawImage,否则可能图片还没有加载完毕
//当然画不上去喽，这就和浏览器的性能有关了。
img.onload=function(){
ctx.drawImage(img,0,0,1800,1000,0,0,500,400);
}
</script>
</body>
</html>
It is equivalent to zooming out, the original pixel is actually 1920*1080
