canvas绘图尺寸莫名其妙的缩放，让我困惑很久的问题
我一定要弄明白为什么？
本文会告诉你，canvas有两个尺寸，绘图尺寸和显示尺寸
背景
请先仔细看看这个图片，彩色部分和黑色部分，图片缩放了
上面图片整体大小： 192×108
我本来希望通过drawImage我将一个图片1920×1080，缩小到：192×108
代码如下：
this.width=192；this.height=108；
canvas.drawImage(img,0,0,this.width,this.height);而且我的canvas 样式：
<canvas style="width: 192px; height: 108px;“ ></canvas>我希望绘图一个： 192，108 尺寸的 canvas
然后我就： this.ctx.drawImage(img,0,0,192,108);
哈哈，结果就是上面这个图片的样子了
实际上就是你上面看到到的效果，这个并不是我要的，图片显然缺少一大块
我期望的样子：
为什么呢？ 两个尺寸问题
原因：元素大小与绘图区域大小不一致的问题
可以通过一下代码你可以看出来
//绘画区域
console.log(canvas.width + "---" +canvas.height)
// 300---150
//元素区域
var box = canvas.getBoundingClientRect(); //canvas元素的边界框
console.log(box.width + "---" + box.height); /
//192---108
这个俩个值不一致，导致了图片的自动缩放，这个自动也导致了我的困惑；
我查询了canvas相关资料：300---150 这个是默认值，我的老天
进一步理解这些内容？
1、canvas元素指html中用css设置的尺寸，用于界面显示
2、绘图区域尺寸需要在js中设置，用于画图；
3、如果这个两个值一致，那么图片不会自动缩放了，你画多少显示就是多少大了；
解决的思路和方法
1、不要用css去设置他们的样式，采用js直接设置canvas的大小；（方案1：实际上基本采用这个方式）
2、绘图时候目标绘图大小进行转换，抵消自动缩放带来的后果 （方案2）
方案1：讨论
将原来的： <canvas style="width: 192px; height: 108px;“ ></canvas>
修改成： <canvas width=”192px“ height=”108px“ ></canvas>
通过以上可以看出，这两个设置是不一样的；
方案二：讨论
自动缩放规律
结果尺寸 = 绘画尺寸（canvas元素/ 绘图表面）
如果要保证自动缩放后还是你期望的结果，那么就采用下面绘图公式（方案二）
那么： 实际绘画尺寸 = 绘画尺寸（绘图表面 / canvas元素）
我实际项目做法：
this.$el 是一个canvas对象
//显示尺寸
this.$el.style.width = width + 'px';
this.$el.style.height = this.height + 'px';
//绘图尺寸=画布尺 这两个值一定是要一样的
this.$el.width = width;//注意没有尺寸单位
this.$el.height = this.height;//注意没有尺寸单位总结：
canvas 有两个尺寸： 显示区域尺寸和绘图尺寸，请确保他们一样；