globalCompositeOperationはすべてのレイヤーに影響を受けますか？

Question

私はシンプルなコードを持っており、私はプレーヤーのマスクを作成したい。

ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.drawImage(level1, 0, 0); 
ctx.save(); 
ctx.fillRect(0,0,mask.width,mask.height); 
ctx.globalCompositeOperation="source-in"; 
ctx.drawImage(hero,0,0); 
ctx.restore(); 

しかし、globalCompositeOperationが影響を受けるレベルのバックグラウンドです。レベル1のバックラウンドはマスク2とみなされます。どのようにしてこの問題を解決できますか？ありがとう。

Answer 1

あなたが欲しいものを伝えるのは難しいです。

// clear the whole canvas 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
// draw image at top left covering part or all of the canvas 
ctx.drawImage(level1, 0, 0); 

ctx.save(); 
// fill part of all of the canvas including the drawn image with black 
ctx.fillRect(0,0,mask.width,mask.height); 

ctx.globalCompositeOperation="source-in"; 
//draw image where each pixel in the hero image get the hero colour RGB and the 
// source alpha. 
ctx.drawImage(hero,0,0); 
ctx.restore(); 

マスクの幅と高さがキャンバスと同じ場合は、ヒーローイメージが表示されます。

レベル画像を維持しながら、ヒーローイメージだけを黒色にしたいのですか？

ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.fillRect(0,0,mask.width,mask.height); 
ctx.globalCompositeOperation="destination-in"; 
ctx.drawImage(hero,0,0); 
ctx.globalCompositeOperation = "source-over"; // reset default 
ctx.drawImage(level1, 0, 0); 

あなたはそれが、黒の英雄ピクセルの背後にあるLEVEL1の画像

ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.fillRect(0,0,mask.width,mask.height); 
ctx.globalCompositeOperation="destination-in"; 
ctx.drawImage(hero,0,0); 
ctx.globalCompositeOperation="destination-over"; 
ctx.drawImage(level1, 0, 0); 
ctx.globalCompositeOperation = "source-over"; // reset default 

をしたい場合は、あなたが何かをしたい場合は、もう少し説明したり、あなたが何をしたいの例のイメージを与えなければならないとしますあなたが得るもの。

1つのキャンバスですべての合成を行うことができない場合があります。これらの状況では、あなたが、その後

ctx.drawImage(offScrCan,0,0);