問題タブ [globalcompositeoperation]

以下のコード スニペットを使用して、 Image of canvas の色を塗りつぶそうとしています。キャンバスに色をうまく塗りつぶします。今、このコードスニペットを使用して、ユーザーのタッチで塗りつぶされた色を消去して、イメージのキャンバスの色を消去しようとしています。そのタッチした位置に色を消し、透明な領域を設定します。今、私はユーザーのタッチでその領域を色で塗りつぶしたいのですが、透明なピクセルのためにその領域に色を付けることができません。ピクセルを色で補充する方法はありますか、またはキャンバスの画像から色を消去する他の方法はありますか? 返信をいただければ幸いです。

キャンバスの画像に色を塗りつぶすためのコード スニペット

キャンバスの画像の色を消去するためのコード スニペット

私が求めていることは非常に簡単かもしれませんが、意図した結果を得るのにかなり苦労しています。

形状（この例では正方形ですが、円などの他の形状でも機能するはずです）が別の形状の境界を離れるときにそれ自体を切り取る必要があります。

基本的に、上の画像は私が欲しいもので、下は私が現在持っているものです: http://imgur.com/a/oQkzG

これは globalCompositeOperation で実行できると聞きましたが、必要な結果が得られるソリューションを探しています。

JSFiddle を使用できない場合の現在のコードは次のとおりです。

JSFiddle リンク

次のように、2 つの要素をブレンドするときにselectどのタイプの を適用するかを選択できる HTML リストを作成したいと思います。globalCompositeOperationcanvas

globalCompositeOperation使用可能なタイプのリストをJavascriptオブジェクトまたは配列としてプログラムで取得する方法はありselectますか? この情報はネイティブ変数に保存されていますか?

here で説明されているように、一部のブレンド モードがユーザーのブラウザでサポートされているかどうかを確認したくありません。globalCompositeOperationブラウザでブレンディング モードを選択するために、サポートされているタイプの完全なリストを取得したいと考えています。

Canvas で「消しゴム」効果を作成しようとしていますが、消しゴムのカスタム形状として SVG 画像を使用しています。

したがって、SVG 画像をキャンバスに描画し、globalCompositeOperation='destination-out' を使用してマスキング効果を作成できます。

IE、Safari、および Chrome でうまく機能します。しかし、Firefox では完全に失敗します。

ユーザーが描画する色を選択したり、描画ツールのサイズ (半径) を変更したり、元に戻したり、やり直したり、キャンバスを完全にクリアしたりできる基本的な機能を備えた HTML5 描画アプリを作成しました。

最近、globalCompositionProperty (desitnation-out) を使用して消しゴム ツールを追加し、キャンバスの選択した領域を消去しました。この部分は正常に機能しますが、消去を元に戻すと、キャンバス全体がクリアされ、やり直し機能が機能しません。通常の描画ツール (source-over を使用) で描画を再開すると、元に戻す/やり直しが機能します。アプリで使用されるいくつかの関数のコードを含めました。描画ツールをオフにするたびに、キャンバスのスナップショットを保存します。これは、キャンバスの取り消しと復元に使用される配列に追加されます。

ここで私が間違っている可能性があることを誰かが説明できますか? globalCompositeOperation プロパティが、保存されているキャンバスの DataURI にどのように影響するかがよくわかりません。

更新：しばらくこれをいじった後、問題を解決する何かを試しました。それが正しい方法かどうかは正確にはわかりませんが、私が行ったことをすべてお見せしたいと思います。

マウスアップでトリガーされる解放機能があります。前の関数は次のとおりです。

コードを少し追加しました。これにより、ユーザーは消しゴム ツールを使用して、アクションを元に戻したりやり直したりできます。なぜこれが機能するのかはまだ正確にはわかりません。

以下の W3S のコードを試してみたところ、青い四角形がソースで、赤い四角形が目的地であるとのことでした。どうやってそれを決定したのかを知る必要があります。それは順序なのか、それとも他に何かありますか??

非常に簡単な質問があります。globalCompositeOperation を限られた数の画像だけに使用することは可能ですか?

たとえば、キャンバスにたくさんのものを描きます。そして、すべてに加えて、無関係に完了したので、2 つの画像に対していくつかの操作を実行したいと考えています (両方の画像ではなく、結果を表示したいだけです)。どうすればそれができますか？

今のところ、このような操作を行うと、その下に既に描画されているすべてに影響します。

そのため、私が見つけた解決策は、別のキャンバスで操作を行うことです。これをメインの最初のキャンバスの上に表示します。しかし、これは悪いようです。まず、それはパフォーマンスに当たります。それから、それは直感的に感じられません。そして最後に、レイヤーの制御を失います。2 番目のキャンバスにあるものはすべて、常に最初のキャンバスの上に表示されます。

これは非常に単純な機能のように見えます。グーグルが苦手なだけだといいのですが。

どうもありがとう！