Question

我需要遮蔽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逐个像素地进行，因为这很慢。必须有一些方法来做到这一点。

Answer 1

我不确定我是否完全理解您尝试实现的目标，但是如何为此添加复合模式：

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;

这也将清除alpha位。

Html5 Canvas - 阴影外部区域

1 个答案: