使用元素绘制的网格看起来拉伸

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

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

如果有人可以看看告诉我我做错了什么会很棒。

http://jsfiddle.net/h2yJn/

Answer 1

我发现了问题。 当你实际需要设置width和height属性时，我正在使用CSS设置的尺寸。 这导致它被拉伸/歪斜。

 var 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）将所有坐标移动半个像素。