使用 <canvas> 元素绘制的网格看起来被拉伸了

Posted 2023-05-08

【中文标题】使用 <canvas> 元素绘制的网格看起来被拉伸了

【英文标题】：Grid drawn using a <canvas> element looking stretched

【发布时间】：2011-05-09 12:07:42

【问题描述】：

我正在尝试在 <canvas> 元素上绘制网格，最终目标是制作 Go board。

由于某种原因，网格看起来被拉伸了，线条粗于 1 个像素并且间距完全错误。它甚至没有从(10,10) 位置开始..

如果有人可以看看告诉我我做错了什么，那就太好了。

http://jsfiddle.net/h2yJn/

【问题讨论】：

在这里***.com/questions/2588181/…和***.com/questions/2892041/…找到答案

这个codereview.stackexchange.com/a/135207/210612 也可能有帮助

【参考方案1】：

我发现了问题。当您实际上必须设置宽度和高度属性时，我正在使用 CSS 设置 <canvas> 的尺寸。这导致它被拉伸/倾斜。

var canvas = $('<canvas/>').attr(width: cw, height: ch).appendTo('body');

http://jsfiddle.net/h2yJn/66/

【参考方案2】：

请在 jsfiddle 之外尝试一下，也许 jsfiddle 正在应用一些线性变换。

另外，请确保在 x 和 y 坐标的任意位置添加 0.5。或者，您可以应用 translate(0.5, 0.5) 将所有坐标移动半个像素。

【讨论】：

我在 jsbin.com 上得到了相同的结果，我很确定我已经在任何可能添加它的地方添加了 0.5px。无论如何，这不会造成如此戏剧性的影响吗？

另一种方法是从 0.5 开始一个循环，如下所示：for (var i = 0.5; i < fieldSize+1; i+=40) ...