canvas需要在标签里直接定义宽高

Canvas宽高设定的奥秘

在web开发中，canvas元素常被用于绘制图形。过去，我总是在canvas标签内直接设定宽高，从未深入思考过这样做的原因。但今天，一个疑问激发了我的欲望：如果把宽高设定在样式表（style）中，会有什么不同呢？

让我们看一下两种不同设定方式的代码对比。

第一种，宽高直接在canvas标签中设定：

```html

```

第二种，宽高在样式表中设定：

```html

```

实验结果显示，直接在canvas标签中设定宽高和在样式表中设定，效果是不同的。在样式表中设定宽高，实际上是对一个默认宽高为300px 150px的画布进行了拉伸。如果在这种情况下进行canvas绘图，可能会得到变形的图形。为了确保绘图的准确性，建议在canvas标签内直接定义宽高。

那么，为什么要在canvas标签内直接设定宽高呢？这是因为canvas的绘制是基于其自身的坐标系进行的。如果在样式表中改变了canvas的宽高，那么它的坐标系也会发生变化，这可能导致绘图时出现变形或错位。而在canvas标签内直接设定宽高，可以确保绘图的稳定性和准确性。这对于开发者来说是非常重要的，因为任何细微的差别都可能导致最终的图形效果出现偏差。