Canvas中的drawImage画图不完整的问题（一定要搜文档！）
因为自己对Canvas比较不熟悉，然后有一天，产品大大说新增一个截图功能。 于是打开了掘金，输入canvas怎么实现截图。 emm...这个答主写的很好，就他了。 于是麻溜的打开编辑器，瞬间化身CV工程师。复制代码
结果第一步就出现了问题。
实现这个功能的第一步
1）用drawImage()把图片画出来。复制代码
咳咳，然后我这一步无论怎么画，画出来的图片都是不全的。。
大概画出来的效果是这样，先看代码
一开始以为是大小不合适（后面确实是大小不合适。）
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext('2d');
const father = document.querySelector(".box")
const img = new Image()
img.onload = () => {
const { height, width } = img
canvas.style.height = height+'px'
canvas.style.width = width+'px'
ctx.drawImage(img, 0, 0, width, height)
}
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'复制代码一想，这不是很简单。于是很快的如图所上加了宽高。。 结果是这样的
很明显图片就是被明显拉伸了。。 想了很久，也没想明白是咋回事。。。
后面搜了一下文档。。 然后发现文档设置canvas元素的宽高是这样的
const { height, width } = img
canvas.height = height
canvas.width = width复制代码瞬间麻了。。。其实一开始在图片明显被拉伸就应该想到是canvas大小的问题。 这样显示就正常了。
顺便看看MDN文档关于这个API的内容：
drawImage（）的使用有三种形式。 drawImage（）(image, x, y) image: 原图像 x,y在画布的起始坐标 drawImage（）(image, x, y，w, h ) x,y在画布的起始坐标。 w,h为传入图片的缩放大小：一般为图片的原来大小， 如果图片的大小超出默认画布的大小，则会形变，所以得重新设置画布得大小， 是通过canvas.width和canvas.height去设置而不是canvas.style.width去设置！！ drawImage（）(image, x, y，w, h，x1,y1,w1,h1 ) 除了Image一样外，x,y是指在原图片的(x,y)点开始剪切大小为w,h。 后四个是指在画布上，画出来的图片左上角的坐标为(x1,y1),大小为w,h 我觉得这个很有用。 复制代码
作者：菜鸡笨鸡
链接：https://juejin.cn/post/7027646055231537188