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

【问题标题】：Grid drawn using a <canvas> element looking stretched使用 <canvas> 元素绘制的网格看起来被拉伸了
【发布时间】：2011-05-09 12:07:42
【问题描述】：

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

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

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

http://jsfiddle.net/h2yJn/

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：