canvas默认画布的尺寸是300像素×150像素。这一默认尺寸可以通过在HTML中设置canvas元素的width和height属性来自定义。
为了确保canvas画布在设置尺寸后不会变形，应当遵循以下步骤：
-
直接在canvas元素上设置尺寸：在HTML中定义canvas元素时，可以直接在标签内设置width和height属性，如
<canvas id="myCanvas" width="500" height="500"></canvas>。这样做会设定画布的实际绘制尺寸，而不是通过CSS样式来拉伸或压缩画布。 -
避免使用CSS来设置尺寸：虽然可以通过CSS为canvas元素指定width和height样式，但这样做实际上会拉伸或压缩画布的内容，以适应所指定的尺寸，从而导致图形变形。因此，不推荐使用CSS来设置画布的尺寸。
-
使用JavaScript动态设置尺寸：如果需要动态地改变画布的尺寸，可以通过JavaScript来操作。例如，通过获取canvas元素的引用，并使用其width和height属性来设置新的尺寸：
var canvas = document.getElementById('myCanvas'); canvas.width = 800; canvas.height = 600;。这样做同样会改变画布的实际绘制尺寸，而不会导致变形。
综上所述，为了确保canvas画布在设置尺寸后不会变形，最佳做法是直接在canvas元素上设置width和height属性，或者通过JavaScript来动态地改变这些属性。避免使用CSS来设置画布的尺寸，以免引发不必要的拉伸或压缩效果。
标签：canvas,默认,height,画布,width,尺寸,设置 From： https://www.cnblogs.com/ai888/p/18676249