5

私はこれについてグーグルで検索しましたが、StackOverflow を含め、「ほとんどの主要なブラウザーでサポートが壊れていた」ということしか見つかりませんでした。私の問題に対する実際の解決策ではありません。

今月のプレイボーイには、目を見張るような中折りを見るための 3D メガネ (赤/シアン) が付属していました。当然のことながら、私はインターネットにアクセスして、可能な限りすべての赤/シアンのアナグリフを見つけ、それらがどれほど素晴らしいかを調べました。最終的に、いくつかのアニメーション GIF を見つけたので、3D シーンに形状を配置できるクールな HTML5 Canvas を作成する必要があるのではないかと考えました。

これが私が得た距離です。 Google Chrome でのみ正常に動作します。Firefox では、"Elevated Text" は正しく表示されますが、四角形は正しく表示されません。

シーンを生成する方法は次のとおりです。それぞれ Z インデックスを含むレイヤーがあり、必要なレイヤーに四角形またはテキストを配置できます。コンセプトはシンプルです。オブジェクトを描画するとき、純粋な赤で左に 1 [Z-index] ピクセルを描画し、次に純粋なシアンで右に 1 [Z-index] ピクセルを描画します。

理論的には、重なっている部分を差し引いて純粋な黒にする必要があります。Chrome では、これは四角形の塗りつぶし、テキストのストロークで発生しますが、テキストの塗りつぶしでは発生しません。Firefox では、これはテキストをストロークする場合にのみ発生します。

の意図した効果globalCompositeOperation="darker"はまさに私が望んでいることですが、この道をたどると苦痛しかもたらさないことは明らかです。

を使用せずに必要な効果を得る方法について、ここに誰か考えがありますglobalCompositeOperationか? 色のアルファ チャネルをいじってみましたが、それがどのように組み合わされるかはあまり好きではありませんでした (純粋な黒になることはありません)。赤とシアンの四角形の間に 3 つ目の黒の四角形を描画できますが、テキストや任意の形状の問題は解決しません。

Javascript でピクセルごとのレンダリングを自分で行うこともできますが、それはやり過ぎのように思えます。何かご意見は？

4

4 に答える 4

3

それでもこれが必要な場合は、2 つのキャンバス間で Photoshop スタイルのブレンド モードを実行できる無料のコンテキスト ブレンダー ライブラリを作成しました。まだ 'darker'を追加していませんが、次のいずれかを実行できます。

  1. GitHub でプロジェクトをフォークし、darker の独自のサポートを追加して (モードを追加する方法は非常に簡単です)、プル リクエストを送ってください。または、
  2. あなたのためにそれを追加してもらうために、賛成票を投じることを約束してください。:) 唯一の困難な部分 (多くのブレンド モードと同様) は、不透明度が 100% 未満の 1 つまたは 2 つの領域をブレンドするときに何が正しいかを判断しようとすることです。
于 2011-02-09T04:53:14.440 に答える
0

Firefox の正しいモードは globalCompositeOperation="difference" のようです。Chrome または IE ではテストしていません。

「違い」は数学的操作であるため、主観的な「暗い」という用語とは異なり、実装にあいまいさはありません。

于 2014-01-11T23:05:23.967 に答える
0

darkenの代わりに使いたいと思うかもしれませんdarker。darker2007年に仕様から削除されました

于 2015-04-02T00:52:59.747 に答える
0

ちょっとハックな方法ですが、私にとってはうまくいきました。次のようにして、キャンバス全体を反転できます

ctx.globalCompositeOperation = "difference";
ctx.fillStyle = "white";
ctx.fillRect(0,0,canvas.width,canvas.height);

次に、 を使用してレンダリングしたいものをレンダリングしglobalCompositeOperation = "lighter"ます。次に、キャンバス全体を再度反転すると、「より暗い」ブレンド モードと同じ結果が得られます。

于 2019-01-14T22:40:41.197 に答える