使用模式在HTML5 / JS中绘制图像

Question

我目前正在制作一个项目，我似乎无法向Google寻求解决方案。我有一个HTML画布，我使用ctx.drawImage（）来堆叠几个图像，我遇到的问题是我无法找到一种方法来专门绘制图像this，使用像this这样的模式。无论如何这可以轻松完成，或者我是否需要尝试生成图像服务器端然后将其推送到客户端进行绘制？

我尝试绘制的图像顺序如下：

• 背景颜色
• 圆形面具
• 第一个链接图像（这是我想用图案绘制的图像）

我试图保持前两个图层可见，只是用图案文件覆盖第三个图层的非透明部分。所有图层都需要将透明部分设置为透明。

Answer 1

已更新以满足自该答案首次​​发布以来添加到问题的其他条件：

您没有说明圆形蒙版是否已填充或透明中心，但以下内容假定为填充中心：

• 绘制字母图像
• 更改补偿。模式为“source-atop”（请参阅​​下面关于操作方法的旧答案）
• 绘制图案。你现在有了字母形状的图案。
• 更改补偿。模式为“destination-over”
• 绘制面具，这将最终“落后于”现有内容
• 使用相同的comp填充背景颜色的画布。模式。

旧答案

当然，如果它有一个alpha通道，则将第一张图像绘制到画布上。

然后将复合模式更改为source-atop（source-in也可以使用，但它会删除不会在新像素下结束的现有内容）：

ctx.globalCompositeOperation = "source-atop";

然后在上面绘制第二张图片。要改回正常模式：

ctx.globalCompositeOperation = "source-over";