2

を使用してパスを描画しようとしていますHTML Canvas。これは、互いにリンクされた複数のベジエ曲線で構成されています。どういうわけか、パス全体を描画してからストロークすることはできません。代わりに、ベジエ曲線ごとにストロークする必要があります。ストロークの色として薄紫色を使用していますが、曲線の交点では、期待する薄紫色ではなく、白のようなものが得られるようです。このように（スタックオーバーフローが初めてなので、画像を投稿できません）：

絵の例

不透明度1で使用stroke styleしているので、透明度の問題ではないと思います。では、何がこの問題を引き起こしているのでしょうか?

参考までに、私は次のようなコードで各ベジエ曲線を描画しています。ここで、a はキャンバスの描画コンテキストであり、 " "this.bloom.cのようなものです。rgba(xxx,xxx,xxx,1)

a.strokeStyle = this.bloom.c;
a.beginPath();
a.moveTo(e.x, e.y);
a.bezierCurveTo(c.x, c.y, b.x, b.y, d.x, d.y);
a.stroke();

どうもありがとう！

4

1 に答える 1

0

複合操作のHTML5Canvasコンテキストでネイティブにサポートされている適切な「ブレンドモード」を使用します。あなたの場合、あなたは' source-over'を使うかもしれません

例：_

var context = document.getElementById('myCanvas').getContext('2d');
context.globalCompositeOperation = 'source-over';

合成とブレンド1.0を参照してください

source-atop
source-in
source-out
source-over
destination-atop
destination-in
destination-out
destination-over
lighter
xor
copy
于 2012-09-23T05:47:40.210 に答える