画布扭曲绘图。如何获得设置大小和样式大小之间的比例因子？答案

【问题标题】：Canvas distorts drawing. How do I get the scale factor between the set size and the styled size?画布扭曲绘图。如何获得设置大小和样式大小之间的比例因子？
【发布时间】：2011-11-24 15:25:09
【问题描述】：

我有这个画布：

<canvas id="game" width="280" height="280"></canvas>

css 通过以下方式设置画布样式：

canvas
{
    width: inherit;
    height: 280px;
}

随着宽度的变化，画布会扭曲绘图。我需要知道如何弥补这一点。谁能帮助我？

【问题讨论】：

画布必须始终是正方形，并且适合包含它的元素？
不，画布可以改变大小，高度和宽度都可以。（取决于设备、浏览器大小等...）但我想要一个绝对的、不失真的上下文。
我认为这取决于您拥有的应用程序类型。你在画什么？
您使用的是相对值吗？ IE。画布大小的百分比？
不，绝对数字。仅像素。

标签： css html canvas distortion

【解决方案1】：

这与 Mozilla Bespin 团队遇到的问题相同。（回到他们使用 Canvas 的时候，在它与 Ace 合并之前）

不要给 Canvas 任何 CSS 宽度/高度规则。这样做通常会很痛苦。将 Canvas 放在一个只有一个东西的 Div 中（画布本身）

随着canvas-parent div的大小改变，改变canvas的大小（canvas.width和canvas.height）以匹配div的大小。

由于大多数浏览器不会在 div 更改大小时触发事件，因此您只需使用计时器每隔半秒检查一次，以查看 div 是否已更改大小。如果有，则相应地调整画布的大小。

【讨论】：

更具体一点，CSS width 和 height 属性影响画布元素的缩放，而对象级别的 width 和 height 声明实际上设置了帆布。此外，由于画布将被调整大小，因此需要将一个函数挂钩到调整大小事件中，以便可以继承旧数据。调整画布大小会清除其内容。调整大小之前的简单getImageData() 和调整大小之后的putImageData() 将处理此问题。
我觉得改变画布的大小是唯一可控的解决方案。现在已经修好了，但背后的痛点。