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

Question

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

出于某种原因，网格看起来很拉伸，线条比1像素厚，间距完全错误。它甚至没有从(10,10)位置开始..

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

http://jsfiddle.net/h2yJn/

Answer 1

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

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

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

Answer 2

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

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