0

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

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

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

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

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

どうもありがとう！

4

1 に答える 1

0

オフスクリーン キャンバスを作成し、作業スペースとして使用します。それらを格納する 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

キャンバスを含むオブジェクトでラップするのではなく、コンテキストをキャンバスにアタッチします。以前は、キャンバスがパフォーマンスに影響を与えるのではないかと心配していましたが、今ではすべての画像を読み込むとすぐにキャンバスに変換しますが、パフォーマンスにはまったく影響しません。

于 2016-11-04T16:47:55.950 に答える