1

前の線と同じ座標で線を描画するとどうなるかを制御するにはどうすればよいですか? 現在、色は明るくなりますが、同じままにしたいです（または、より正確には、2行目を最初の行の上に置きたいです）。

私はやろうとしました：

_context.setGlobalCompositeOperation(Composite.SOURCE_OVER);

ただし、同じキャンバスに描画するときではなく、キャンバスにキャンバスを描画するときにのみ機能するようです。

4

1 に答える 1

0

あなたの色が完全なアルファを持っていると仮定すると、あなたの問題はおそらくあなたが整数座標で幅1の線を描くという事実に関連しています。

次のフィドルを見てください：http：//jsfiddle.net/RAgak/

整数座標で描画すると、線が太くぼやけます。そして、もう一度描くと明るくなります。しかし、半整数の座標で線を引くと、これは起こりません。

var y = 10;
c.beginPath();
c.moveTo(0, y);
c.lineTo(30, y);
c.stroke(); // fuzzy
c.beginPath();
c.moveTo(50, y+0.5);
c.lineTo(80, y+0.5);
c.stroke(); // ok

これは、線が上にあるすべてのピクセルに描画されるためです（キャンバス上の位置はフロートです）。キャンバス上のJavaScriptで正確な垂直線または水平線を描画する場合は、半分の整数で描画することをお勧めします。

図を参照してください。最初の水平線は、ay位置1で描画されました。この線はぼやけて幅が広くなっています。2番目の水平線は4.5のay位置で描かれました。薄くて正確です。

ここに画像の説明を入力してください

少なくとも水平線または垂直線（または長方形）を描画する場合の解決策は、線の幅を考慮に入れて、整数または半整数の座標で描画することです。

于 2012-12-06T09:31:10.683 に答える