我目前正在处理一个项目，但我似乎无法在 Google 上找到解决方案。我有一个 HTML Canvas ，我正在使用 ctx.drawImage() 来堆叠几个图像，我遇到的问题是我无法找出专门绘制图像的方法 this ，使用类似 this 的模式。无论如何，这可以轻松完成，还是我需要尝试在服务器端生成图像，然后将其推送到客户端进行绘制？
我尝试绘制的图像顺序如下:
- 背景颜色
- 圆形蒙版
- 第一个链接的图像(这是我想要用图案绘制的图像)
我试图保持前两层可见，并用图案文件覆盖第三层的不透明部分。所有图层需要透明的部分都设置为透明。
最佳答案
已更新，以满足自首次发布此答案以来添加到问题中的其他条件:
您没有说明圆形蒙版是否已填充或透明中心，但以下假设已填充中心:
- 绘制字母图像
- 更改补偿。模式为“
source-atop”(有关操作方法，请参阅下面的旧答案) - 绘制图案。现在您已经有了字母形状的图案。
- 更改补偿。模式为“
destination-over” - 绘制 mask ，这最终将位于现有内容“后面”
- 使用相同的合成用背景颜色填充 Canvas 。模式。
旧答案
当然，将第一张图像绘制到 Canvas 上，前提是它具有 Alpha channel 。
然后将复合模式更改为source-atop(也可以使用source-in，但它会删除不在新像素下的现有内容) :
ctx.globalCompositeOperation = "source-atop";
然后在上面绘制第二个图像。要更改回正常模式:
ctx.globalCompositeOperation = "source-over";
关于javascript - 在 HTML5/JS 中使用模式绘制图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36876176/