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

Question

我正在尝试在<canvas>元素上绘制一个网格，最终目标是制作一个围棋棋盘。

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

如果有人能够查看并告诉我我做错了什么，那就太好了。

http://jsfiddle.net/h2yJn/

- Acorn

---

在这里找到答案：https://dev59.com/RnE85IYBdhLWcg3w1HOF 和 https://dev59.com/XnE85IYBdhLWcg3wNgrk - Acorn

这个 https://codereview.stackexchange.com/a/135207/210612 也许会有所帮助 - Carson

Answer 1

我找到了问题所在。我通过CSS设置<canvas>的尺寸，但实际上必须设置宽度和高度属性。这样会导致图像被拉伸/扭曲。

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

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

- Acorn

Answer 2

请尝试在jsfiddle之外进行操作，可能jsfiddle正在应用某些线性变换。

另外，请确保您将0.5添加到x和y坐标的所有位置。或者，您可以应用translate（0.5，0.5）将所有坐标移动半个像素。

- pts

---

我在jsbin.com上得到了相同的结果，我很确定我已经尽可能地添加了0.5像素。但这不会引起如此剧烈的影响，对吗？ - Acorn

另一种方法是从0.5开始循环，像这样：for (var i = 0.5; i < fieldSize+1; i+=40) {... - Aleksandr Kravets