限られた数の画像に対してglobalCompositeOperationを使用する

Question

私は非常に単純な質問があります。限られた数の画像に対してのみglobalCompositeOperationを使用できますか？

たとえば、私はキャンバスにたくさんのものを描きます。そして、すべての上に、無関係に完了し、私は2つの画像でいくつかの操作を行いたい（そして、私は結果を両方の画像ではなく表示したい）。それはどうやってできますか？

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

私が見つけた解決策は、メインの最初のキャンバスの上に表示される別のキャンバスで操作を行うことでした。しかし、これは悪く見えます。まず、公演を聴く。それから、それは直感的に感じません。そして、最後に、私はレイヤーを自由にコントロールします。私の2番目のキャンバスにあるものは、常に最初のキャンバスの上にあります。

これはかなり単純な機能のように見えますが、私はグーグルではちょうどいいと思う！

ありがとうございます！

Answer 1

オフスクリーンキャンバスを作成し、作業スペースとして使用します。あなたがそれらを格納するRAMを持っている限り、多くを作成することができます。そのよう

function createCanvas(w,h){ 
     var canvas = document.createElement("canvas"); 
     canvas.width = w; 
     canvas.height = h; 
     canvas.ctx = ctx.getContext("2d"); 
     return canvas; 
} 

簡単にオフスクリーンキャンバスを作成し、あなただけのイメージとしてそれを処理するために

。別のキャンバスに描画する

var offScreenCan = createCanvas(1024,1024); 
offScreenCan.ctx.drawImage(myImage); // put something on the canvas 
ctx.drawImage(offScreenCan,0,0); // draw that canvas to another 

キャンバスを含むオブジェクトにキャンバスをラップするのではなく、キャンバスにコンテキストを添付します。私はキャンバスがパフォーマンスに影響を与えることを心配していましたが、すべてのイメージを読み込んだ直後にキャンバスに変換し、パフォーマンスにはまったく影響しません。