56

この jsfiddle には、lineWidth が 1 の行があります。

http://jsfiddle.net/mailrox/9bMPD/350/

例えば：

ctx.lineWidth = 1;

ただし、キャンバスに描画すると線の太さは 2px になりますが、どうすれば 1px の太い線を作成できますか。

長方形 (高さ 1 ピクセル) を描くこともできますが、線を対角線でも機能させたいと考えています。では、この行を 1 ピクセルの高さにするにはどうすればよいでしょうか?

ありがとう！

4

8 に答える 8

114

キャンバスはピクセルの半分から計算します

ctx.moveTo(50,150.5);
ctx.lineTo(150,150.5);

したがって、半分から始めれば修正されます

修正版: http://jsfiddle.net/9bMPD/357/

この回答は、なぜそのように機能するのかを説明しています。

于 2012-12-14T13:14:34.340 に答える
37

X方向とY方向に0.5ピクセルずつ移動してから、座標に値全体を使用することもできます（場合によっては丸める必要があります）。

context.translate(0.5, 0.5)

context.moveTo(5,5);
context.lineTo(55,5);

キャンバスのサイズを変更すると、翻訳がリセットされることに注意してください。そのため、もう一度翻訳する必要があります。

あなたはここで翻訳機能とそれを使う方法について読むことができます：

https://www.rgraph.net/canvas/reference/translate.html

この答えは、なぜそれがそのように機能するのかを説明しています。

于 2012-12-14T18:36:47.903 に答える
8

または、この回答が述べているように、幅を 1 にするには、半ピクセルから開始する必要があります。

ctx.moveTo(50.5,150.5);
ctx.lineTo(150.5,150.5);

http://jsfiddle.net/9bMPD/355/

于 2012-12-14T13:15:58.593 に答える
3

Google で最初のヒットを見ましたか? ( を検索canvas line width 1px)。これが正確に「クリーン」または「リーン」ではないことは認めざるを得ませんが。Ferry Kobus のソリューションははるかに優れています。繰り返しになりますが、そもそも「ハーフピクセル」を使用する必要があるのは残念です...

于 2012-12-14T13:14:08.963 に答える