canvas宽高属性和样式宽高以及drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)的初认识

背景：最近遇到canvas模糊的问题，虽然知道怎么解决，但不知其理。所以摸索了一下，那canvas宽高属性和样式宽高和drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)的sWidth、sHeight、dWidth、dHeight有什么关联和区别。

假设：后端接口返回一张图片，我想将其用canvas绘制在网页上。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：s开头的属性，用人话来讲，就是对后端返回的图像进行裁剪用的。d开头的属性，就是在画布的绘制的具体大小以及偏移位置。所以简单来讲，就是裁剪完，在画布绘制在什么位置，以及绘制大小。那画布是谁？那就是canvas标签。

画布大小：其实就是canvas标签的宽高属性决定的。画布大小也叫内部像素分辨率（也就是说分辨率越大越清晰）。当 canvas 的内部分辨率和显示尺寸（样式宽高）不一致时,浏览器需要进行缩放渲染,这会增加 CPU 和 GPU 的负担,从而影响性能。

<canvas
     id="canvas"
      width="500"
      height="500"
    >

canvas样式宽高：其实可以理解成画布的容器宽高，而且画布跟这个容器的关系，存在铺满的关系。假设样式宽高设为600px，那么我画布才500，所以要铺满，造成的影响就是拉伸出现模糊。相反的就是缩小。

#canvas {
    width: 600px;
    height: 600px;
}

解决模糊问题：想要维持清晰，本质要维持在画布与容器的1:1关系。但事实上没那么简单，现在出现了超视网膜屏，也就是常说的dpr，简单来讲就是1个逻辑像素，可能由多个物理像素渲染。所以drp也要参与运算，根据window.devicePixelRatio获取当前的dpr。

有两种情况去获取1:1的关系。

(1) canvas.width * dpr = canvas.style.width

(2) canvas.width = canvas.style.width * dpr

区别就是改变的是画布大小还是容器样式大小。

有说的不好或错的地方，欢迎指正，共同进步！！！