3

そこで、赤、緑、青のコンポーネントとそれらがどのように関連しているかを示す単純な色相ホイールを描画しようとしています。beginPath()問題は、とを使用しているにもかかわらず、私の(単純な1度の)アークが後のアークのストロークを引き継いでいることですclosePath()

私の現在の進捗状況はhttp://meyerweb.com/eric/css/colors/hsl-from-rgb.htmlです。最も内側のリングは、そのリングを対象としたもので、青から黒にフェードします。次のリングアウトは緑のフェードから黒のみを表示し、3番目のリングアウトは赤のフェードから黒のみを表示する必要があります。最も外側の最も厚いリングは、色相ホイールの周りの全スペクトルを表示することを目的としています。これは、他のリングと同様に、細いスポークで見ることができます。

描画ブロックの順序を逆にすると、最も外側のリングが正常になり、すべての内側のリングが台無しになり、ストロークスタイルが前方に漏れていることは明らかです。どうやって、なぜ、どうやって問題を克服するのかわからない。4つの別々のオブジェクト(たとえば、ctx1からctx4)を定義し、それぞれに別々に描画する必要がありますか?

キャンバスの円弧のさまざまなfillStyleの色を調べましたが、そこでの推奨事項は役に立たなかったようです。他のグーグルは何の役にも立ちませんでした。

4

2 に答える 2

1

私はあなたのコードをあまり長く見ていませんでしたが、問題はおそらくキャンバスにあるのではなく、おそらくあなたがすべてを描いている順序です。

あなたが持っている4つのセットがありますよね?最初のセットから1つ、2番目のセットから1つ、3番目のセットから1つ、4番目のセットから1つ、次に最初のセットから1つを描画しています...

順序を変更すると、すべてが正常になります。

http://jsfiddle.net/muatT/

(怠惰なことに、forループの断片全体をそのままコピーしました。おそらくそのコードを大幅に簡略化できます)

于 2012-06-08T19:38:01.960 に答える
1

RGB値に小数を使用することはできません。丸める必要があります。

http://jsfiddle.net/M6KbD/

于 2012-06-08T19:50:27.240 に答える