html5 canvas 不遮挡,Html5 Canvas - 对外部区域进行遮挡

我需要遮挡外部区域，即我在着色器中绘制的形状被正常绘制，然后对其反色进行阴影处理。其最简单的例子来说，并指出，工作不到位：Html5 Canvas - 对外部区域进行遮挡

// 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由像素的基础上，因为这是缓慢的。必须有某种方式来做到这一点。

2013-07-11

Rewind