伸びて見える<canvas>要素を使用して描画されたグリッド

Question

Goボードを作成するという最終的な目標を設定して、<canvas>要素にグリッドを描画しようとしています。

何らかの理由でグリッドが引き伸ばされて見え、線が1ピクセルより太く、間隔が完全に間違っています。 (10,10)の位置でも開始されません。

私が間違っていることを誰かに教えてもらえるといいですね。

http://jsfiddle.net/h2yJn/

alt text

Acorn · Accepted Answer

問題が見つかりました。 <canvas> CSSを使用して、実際に幅と高さの属性を設定する必要がある場合。これにより、伸びたり歪んだりしていました。

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

alt text

pts · Answer

Jsfiddleの外で試してください、おそらくjsfiddleが線形変換を適用しています。

また、どこでもx座標とy座標の両方に0.5を追加するようにしてください。または、translate（0.5、0.5）を適用して、すべての座標を半ピクセルずつシフトすることもできます。