HTML 5屏蔽和剪切一个图像

Question

我有一个水平运行的导航div（div A），上面有一个div（div B）z-indexed，它将包含一个交叉渐变的背景图像系列，使用jquery每5秒设置一次background-image属性。但是，我需要将红色部分“遮盖”在div的背景图像上，而蓝色部分需要透明到底部div（div A）。无论显示哪个背景图像，屏蔽/裁剪都将应用于并且相同。

因为最终用户可能会上传新图像以用作循环背景图像，所以无法通过图像编辑器编辑图像以创建遮罩和透明度......

这可以通过将HTML 5屏蔽/裁剪功能应用于背景图像或包含div（div B）的某些组合来实现吗？如果是这样，有人可以向我展示屏蔽/裁剪都应用于图像的示例吗？

如果没有，有人可以在上传之前建议除图像编辑之外的其他方法吗？

Answer 1

澄清一下：您希望每个红色像素变得透明吗？

以下是对如何操作和演示的解释：http://jsfiddle.net/m1erickson/2oun9t1x/

• 在画布上绘制背景图片。

• 制作一个“遮蔽”图像，其中仅包含您要用作遮罩的红色像素。

• 将合成设置为“目标输出”，这会导致任何现有像素在与新绘图相交的位置变为透明：context.globalCompositeOperation='destination-out'。

• 绘制红色图像，仅在与红色像素相交的位置“擦除”图像。

背景图片（左）和面具（右）：

使用合成蒙版的背景图片：