javascript - html5キャンバスを使用して1pxの境界線で長方形を描く方法は?

Question

作成された長方形の右下隅に白い点が表示される理由がわかりません。(WinXP では 21.0.1180.83 および .89 でのみ表示されます)

キャンバスの高さによって異なります...

http://jsbin.com/ejeyef/1/

Answer 1

おそらく、サブピクセル レンダリングと関係があります。コードを見て、次のことを行います。

c.rect(10.5, 10.5, 100, 100);

つまり、「X から 10.5 ピクセル、Y から 10.5 ピクセルの座標にサイズ 100x100 ピクセルの長方形を描く」ということです。画面/ブラウザは「ハーフ ピクセル」をレンダリングできないため、常にどこかで丸められます。それがあなたの問題の原因かもしれません。

これを修正するには、この種のものに半分の値を使用しないでください。これはうまくいきます：

c.rect(10, 10, 100, 100);