javascript - 使用看起来拉伸(stretch)的 <canvas> 元素绘制的网格

Question

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

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

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

http://jsfiddle.net/h2yJn/

Answer 1

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

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

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