使用 CSS 时画布会被拉伸，但使用“宽度”/“高度”属性是正常的

似乎 width 和 height 属性决定了画布坐标系的宽度或高度，而 CSS 属性只决定了显示它的框的大小。

这在 HTML specification 中进行了解释：

canvas 元素有两个属性来控制元素位图的大小：宽度和高度。这些属性在指定时必须具有有效的非负整数值。必须使用解析非负整数的规则来获取它们的数值。如果缺少某个属性，或者如果解析其值返回错误，则必须使用默认值。 width 属性默认为 300，height 属性默认为 150。

---

要设置您需要的 width 和 height，您可以使用

canvasObject.setAttribute('width', '475');

---

对于 <canvas> 元素，width 和 height 的 CSS 规则设置将绘制到页面的画布元素的实际大小。另一方面，width 和 height 的 HTML 属性设置画布 API 将使用的坐标系或“网格”的大小。

例如，考虑这个 (jsfiddle)：

var ctx = document.getElementById('canvas1').getContext('2d'); ctx.fillStyle = "红色"; ctx.fillRect(10, 10, 30, 30); var ctx2 = document.getElementById('canvas2').getContext('2d'); ctx2.fillStyle = "红色"; ctx2.fillRect(10, 10, 30, 30);画布{边框：1px纯黑色； }

相对于画布元素的内部坐标，两者都绘制了相同的东西。但是在第二个画布中，红色矩形将是两倍宽，因为整个画布被 CSS 规则拉伸到更大的区域。

注意：如果未指定 width 和/或 height 的 CSS 规则，则浏览器将使用 HTML 属性来调整元素的大小，以使这些值的 1 个单位等于页面上的 1px。如果未指定这些属性，则它们将默认为 300 的 width 和 150 的 height。

---

如果您在 CSS 中设置宽度和高度，画布将被拉伸。如果你想动态操作画布的尺寸，你必须像这样使用 JavaScript：

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

---

浏览器使用 css 宽度和高度，但画布元素根据画布宽度和高度进行缩放。在 javascript 中，读取 css 宽度和高度并将画布宽度和高度设置为该值。

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();

---

山尼玛校正

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))

---

canvas通过缓冲区渲染图像，因此当您指定宽度和高度html属性时，缓冲区大小和长度会发生变化，但是当您使用css时，缓冲区的大小是不变的。使图像拉伸。

使用 html 大小调整。

画布大小改变 -> 缓冲区大小改变 -> 渲染

使用 css 大小调整

画布大小改变 -> 渲染

由于缓冲区长度保持不变，因此当上下文渲染图像时，图像将显示在调整大小的画布中（但在未更改的缓冲区中渲染）。

---

CSS 设置画布元素的宽度和高度，因此它会影响坐标空间，使绘制的所有内容都倾斜

这是我如何使用 Vanilla JavaScript 设置宽度和高度的方法

canvas.width = numberForWidth

canvas.height = numberForHeight

---

如果您想要基于例如 CSS 媒体查询的动态行为，请不要使用画布宽度和高度属性。使用 CSS 规则，然后在获取画布渲染上下文之前，为宽度和高度属性分配 CSS 宽度和高度样式：

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...

---