Javascript 使用a<；帆布>；元素看起来被拉伸了

我试图在

元素上绘制一个网格，最终目标是生成一个网格

由于某种原因，网格看起来被拉伸了，线条的厚度超过1个像素，间距完全错误。它甚至不会在

（10,10）

位置启动

如果有人能看一眼，告诉我我做错了什么，那就太好了

---

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

---

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

我发现了问题。我正在使用CSS设置

的维度，而实际上需要设置宽度和高度属性。这导致它被拉伸/扭曲

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

var canvas=$（''）.attr（{width:cw，height:ch}）.appendTo（'body'）；

---

我在jsbin.com上得到了相同的结果，我非常确定我已经在所有可能添加的地方添加了0.5px。无论如何，这不会造成如此巨大的影响，是吗？另一种方法是从0.5开始循环，就像这样：

for（var i=0.5；i

在这里和这里找到了答案