問題タブ [globalcompositeoperation]

javascriptでテキストマスキングをしようとしています。

以下は私のコードです:-

しかし、それは機能していません。この問題を解決するために私を助けてください。

MDN のこのデモhttps://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.htmlを jsFiddle に入れ、色を 50% 透明にしました。 http://jsfiddle.net/eGAvb/

現在、Apple によるとsource-in、「ソース イメージと宛先イメージの両方が不透明な場合はソース イメージを表示します。ソース イメージと宛先イメージが両方とも半透明の場合はブレンドを表示します。ソースまたは宛先のいずれかが透明な場合は透明度を表示します。」

そのため、表示方法を見ると問題があることがわかります。紫ではなくとても薄いピンクです。正方形の青がここに混ざっていない理由を誰か説明できますか? なぜ実際に軽くなったのですか？

追加: 私は実際に気づいたのですが、はるかに印象的な明白な例です。公式仕様によると、xor は明らかに紫色を示しています:「ソース画像と宛先画像の排他的論理和」では、何も表示されないはずです! 不透明度がこれらのルールに影響を与えるべきであるとはどこにも言及していません。

複数の四角形を描画してから、globalCompositeOperation 'source-in' を使用してそれらをマスクしようとしていますが、問題は、四角形を塗りつぶすと消えてしまうことです... fill() 呼び出しが 1 つしかない場合、それらはすべて適切に描画されますただし、最後に適用された塗りつぶしスタイルのみを尊重します。

問題のコード -

上記のコードは正常に動作します。しかし、これを行ってマスクを外すと -

私はそれぞれの長方形を持っており、それらは塗りつぶしスタイルを尊重しています。問題は、マスクを有効にすると表示されなくなることです。

globalCompositeOperation 'source-in' の下に持つことができる要素の数に制限はありますか、それとも単純なものが不足していますか?

ここにいくつかのフィドルがあります-

http://jsfiddle.net/ENtXs/ - 期待どおりに動作しますが、塗りつぶしスタイルを尊重しません。

http://jsfiddle.net/ENtXs/1/ - マスクを削除してすべての要素を表示する

http://jsfiddle.net/ENtXs/2/ - beginPath() および fill() 要素を追加すると、塗りつぶしスタイルが考慮されます。(マスキングなし)

http://jsfiddle.net/ENtXs/3/ - マスクを追加し直します (もう何も表示されません)

http://jsfiddle.net/ENtXs/4/ - #3 と同じコードの四角形が 1 つだけあれば正しく動作します。

これは、このフィドルを提供する KineticJS 4.6.0 を使用して、この質問で回答されました

しかし... kineticjsの最新バージョンでこれを行う方法はありますか?

私は kineticjs 4.7.2 で同じフィドルを試しました: http://jsfiddle.net/qNtSg/ 新しい API で drawFunc を変更しました

合成がうまくいかない

複数のglobalCompositeOperationを使用する必要がある単純なアプリを設計しているため、複数の非表示アイテムを使用し、それらをマージして最終結果を得る必要があります。

キャンバス アイテムの 1 つはdrawImage()に使用され、アルファ マスクとして使用されます。

2番目のキャンバスで1番目のキャンバスを描画するために使用すると、それが正確にコピーされるため、2番目のものをその上に追加できると想定しました。fillRect()のみをコピーし、 drawImage()関数を無視します...

最初のキャンバスのコンテンツ全体を2番目に転送するにはどうすればよいですか? 2 番目のキャンバスに移動するには、マスクされた部分が必要です。

何時間も立ち往生していて、あなたの助けが必要です。toDataUrl("image/png")を使用してから、それを2番目のキャンバスに出力しようとしましたが、同じ結果が得られました:(

簡易版: http://jsfiddle.net/EbVmm/17/

ありがとう

これまでのところ、これを取得しました：http://jsfiddle.net/Lt7VN/

しかし、黒の四角形だけを切り取りたいのですが、赤と黒の両方の四角形を切り取り/クリップします。どうすればそれを行うことができますか?

このアニメーションをやりたい - 海の水位が上昇し、穴のある小さな山を飲み込む。水が引くとポケットに溜まり、水位が上がると一つになります。このアニメーションは無期限に続きます。今、私は2つのアプローチを使ってこれをやろうとしました.

1) 海の水の流れに合わせてプールの水を汲み上げて浄化する。ctx.bezierCurveTo(x1,y1,x2,y2,end_x,end_y); 水の流れに合わせて 1 番目と 2 番目のコントロール ポイントを変更し、土台を少し平らなものから球形に、またはその逆に変化させました。しかし、スムーズではなく、2番目のピットは不規則なベースであるため不可能です。

2) 必要なポケットを水で満たし、不透明度で遊んで、水没時にポケットの水が海水と混ざるようにしました。繰り返しますが、このアプローチでは滑らかな外観が得られません。

これは次のようになります。

ベース画像はキャンバスの背景です。水の流れを制御するだけです。

何をすべきか提案してください。

私は次のことを達成しようとしています:

キャンバス上に多数の同心円 (またはリング) が描かれています。各円には「穴」があるため、その後ろに描かれた小さな円は部分的に見えます。各フレーム (window.requestAnimationFrame を使用してレンダリングしています) の各円/形状/リングの半径がわずかに増加します。

2 つのリングを使用したシナリオが、ここのイメージに示されています。

コード：

1. ここでの問題は正確には何ですか？円が描画される前に clearRect を呼び出しています。「私が実際に得ているもの」の画像を参照してください。これは、SINGLE RING が複数のフレームにわたって描画された結果です。真ん中に中空の四角形がある黒い円と違うものは得られないはずです。(フレームごとに半径が増加していることに注意してください。)

2. globalCompositeOperation を切り替えるだけでは、私が望む効果が得られない可能性があることは認識しています。変更しようとしているオブジェクトの下にある「穴」のすべてを消去せずに、キャンバスに描画されたオブジェクトに「穴」を描くにはどうすればよいですか?

これは、globalCompositeOperation 値のリファレンスとして使用したチュートリアルです。

Firefox 28.0 を使用しています。