Canvas元素的HTML尺寸与CSS尺寸对视觉效果的影响

在开发过程中，经常会遇到 Canvas 元素出现变形或失真的问题。这主要是由于 Canvas 元素的 HTML 尺寸和 CSS 尺寸不匹配导致的。

一个 DOM 元素存在三种尺寸：HTML 尺寸、CSS 尺寸和实际渲染尺寸。HTML 尺寸是指在 HTML 中直接定义的宽高属性，CSS 尺寸是指通过 CSS 设置的宽高属性，而实际渲染尺寸则是浏览器最终呈现的尺寸。

默认情况下，Canvas 元素的 HTML 尺寸是 300px * 150px。如果我们在 HTML 中没有显式指定 Canvas 元素的尺寸，而仅通过 CSS 设置其尺寸，就会出现视觉上的变形。

例如，我们在一个默认 300px * 150px 的 Canvas 上绘制一个半径为 50px 的圆：

最终显示的结果如下图所示：

可以看到，虽然 Canvas 的尺寸确实是 200px * 200px，但圆已经变成了椭圆，图形发生了形变。这是为什么呢？

如果移除 CSS 设定的尺寸，结果会如何？

此时图形是正常的，Canvas 的尺寸确实是默认的 300px * 150px。

通过对比和分析，我们可以得出结论：最初我们在 300px * 150px 的 Canvas 上绘制了一个圆。绘制完成后，我们希望将 Canvas 的尺寸变成 200px * 200px，但 Canvas 本身没有改变。为了适应新的尺寸，浏览器会对 Canvas 进行拉伸。假设 Canvas 有弹性，从 300px * 150px 拉伸到 200px * 200px，圆的长半轴变为原来的 1.33 倍，短半轴变为 0.68 倍，因此圆变成了椭圆。

结论：
在使用 Canvas 绘制图形时，为了避免不必要的变形和失真，一定要为 Canvas 元素显式设定 HTML 尺寸的宽高。