0

OUTSIDE 領域をシェーディングする必要があります。つまり、シェーダーで描画する形状は通常どおりに描画され、その逆がシェーディングされます。例で説明するのが最も簡単で、機能していないビットに注意してください。

// canvasBackground is the actual background
// canvasBackgroundContext is its context
// To make it simple, I will fill it with green

canvasBackgroundContext.fillStyle = "#00FF00";
canvasBackgroundContext.clearRect(0, 0, canvasBackground.width, canvasBackground.height);

// I also have a the shader
// canvasShader and canvasShaderContext with same width and height as canvasBackground
canvasShaderContext.fillStyle = "rgba(0, 0, 0, 0.25)"; // Black but slightly transparent
canvasShaderContext.clearRect(0, 0, canvasShader.width, canvasShader.height);

// Everything so far is great - now the problem

// This is wrong, because when I create the area I want to create clear, it does not work
// because when you draw a shape it does not work like clearRect, as it does not set each pixel to a clear pixel
canvasShaderContext.fillStyle = "rgba(0, 0, 0, 0.0)";

// Create the only non shaded bits in the shader, overlapping rects
canvasShaderContext.fillRect(10, 10, 50, 50);
canvasShaderContext.fillRect(40, 40, 50, 50);

// So when I do this, it should shade the entire background except for the two 50x50 overlapping rects at 10,10 and 40,40
canvasBackgroundContext.drawImage(canvasShaderContext, 0, 0);

遅いので、getImageData を使用してピクセルごとに移動したくありません。これを行う何らかの方法があるはずです。

4

1 に答える 1

2

あなたが達成しようとしていることを完全に理解しているかどうかはわかりませんが、これに複合モードを追加するのはどうですか:

canvasShaderContext.fillRect(10, 10, 50, 50);
canvasShaderContext.fillRect(40, 40, 50, 50);

その結果:

/// store old mode whatever that is
var oldMode = canvasShaderContext.globalCompositeOperation;

/// this uses any shape that is drawn next to punch a hole
/// in destination (current context).
canvasShaderContext.globalCompositeOperation = 'destination-out';

/// now draw the holes
canvasShaderContext.fillRect(10, 10, 50, 50);
canvasShaderContext.fillRect(40, 40, 50, 50);

/// set back to old mode
canvasShaderContext.globalCompositeOperation = oldMode;

これにより、アルファ ビットもクリアされます。

于 2013-07-11T22:16:23.123 に答える