设置 html5 画布标签大小的正确方法是什么？为什么？

【问题标题】：what is the right way to set html5 canvas tag size and why?设置 html5 画布标签大小的正确方法是什么？为什么？
【发布时间】：2022-12-20 03:33:26
【问题描述】：

const canvas = document.querySelector('canvas');

canvas.style.width = 750+"px";
canvas.style.height = 250+"px";

OR

canvas.width = 750;
canvas.height = 250;

我只想知道哪种方法是正确的

【问题讨论】：

标签： html5-canvas

【解决方案1】：

设置 HTML5 canvas 元素大小的最佳方法是使用 width 和 height 属性：

const canvas = document.querySelector('canvas');

canvas.width = 750;
canvas.height = 250;

使用样式属性更好地设置宽度和高度，因为这些值将被宽度和高度属性的默认值覆盖。

canvas 元素的宽度和高度属性确定画布的大小（以像素为单位），而相应的样式属性设置画布在页面上呈现时的大小。因此，如果您将样式属性设置为不同于宽度和高度属性，您最终会得到一个扭曲或拉伸的画布。

【讨论】：