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

Question

我试图在一个<canvas>元素上绘制一个网格,最终目标是制作Go棋盘.

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

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

http://jsfiddle.net/h2yJn/

Answer 1

我发现了这个问题.<canvas>当你必须设置width和height属性时,我正在设置使用CSS 的尺寸.这导致它被拉伸/歪斜.

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

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