急:用canvas做遮罩层的话，如何来高亮显示原始页面的部分区域（多个）

Question

项目里需要用canvas来做遮罩层，当canvas起来遮罩后，该如何高亮下面的原始页面的部分区域呢？
直接填充的话，还是雾蒙蒙的。

cxt.fillStyle = 'rgba(255,255,255,1)';
cxt.fillRect(1044, 100, 250, 250);

见上图，如果fillStyle的透明度设为0.9,就是左边，直接为白色或rgba(255,255,255,1),就是右边的效果。都有一种雾蒙蒙的感觉。

通过提升z-index的方法，有时候不凑效。无奈只得从canvas里想办法。

没有蒙板，直接显示的效果如下。

Answer 1

考不考虑拆分canvas，多个独立的canvas控制区域显示，要显示原始页面的那个canvas隐藏就可以了

Answer 2

其实我看不太懂你想问什么。如果是遮罩的话，并且是矩形，可以用 clearRect 来做。如下：

ctx.fillStyle = "rgba(255, 255, 255, 1)";
ctx.fillRect(0, 0, width, height); // width & height 为遮罩的宽高
ctx.clearRect(1044, 100, 250, 250);   

如果要用其它形状的话，可以参考一下：http://www.w3school.com.cn/ta...

Answer 3

贡献个张鑫旭的实现，另外我自己觉得也可以用clip-path试试吧，canvas并不是很好的选择（个人觉得个别场景下试试SVG会有惊喜的）。