画布绘图尺寸的秘密：为何会出现奇怪的缩放现象？
让我带你揭开这个困扰已久的谜团。在canvas中，有两个重要的尺寸概念：绘图尺寸和显示尺寸。
我们先来了解一下背景。假设你有一张图片，你想将其缩小并绘制在canvas上。你设置了一个canvas的显示尺寸为192×108，并试图将一张1920×1080的图片缩小绘制进去。但是结果并不理想，图片似乎被自动缩放了，缺少了一部分。
我们来探究一下这个问题的根源。原因就在于元素大小（显示尺寸）与绘图区域大小不一致。通过查看代码，你可能会发现canvas的绘画区域尺寸（通过js设置）和元素尺寸（通过css设置）是两个不同的值。这两个值不一致，导致了图片的自动缩放。
为了更好地理解这些内容，我们可以进一步解析一下：
2. 绘图区域尺寸需要在js中设置，这是用于实际绘图的。
3. 当这两个值一致时，图片就不会自动缩放，你绘制的大小就是显示的大小。
那么，如何解决这个困扰呢？有两种方案：
方案一：不要通过css去设置canvas的样式，而是采用js直接设置canvas的大小。这意味着你需要将原来的代码中的样式设置改为直接在js中设置canvas的宽度和高度。
方案二：在绘图时考虑到自动缩放的影响，对目标绘图大小进行转换或调整。如果你想要保证自动缩放后的结果仍然符合你的期望，就需要根据实际情况调整你的绘图公式。
在实际项目中，我通常会采取方案一的做法。例如，我会这样设置：
首先通过js获取canvas对象，然后通过设置`this.$el.width`和`this.$el.height`来设定绘图的尺寸。为了确保显示尺寸与绘图尺寸一致，我会通过css来设置canvas的显示尺寸。这样，就能确保图片在绘制时不会出现奇怪的缩放现象。
canvas有两个尺寸，分别是显示区域尺寸和绘图尺寸。在绘图时，请确保这两个尺寸一致，以避免出现自动缩放的问题。希望这篇文章能帮助你更好地理解canvas的绘图尺寸问题，并找到解决方案。
