【问题标题】：Use a pattern to draw an image in HTML5/JS在 HTML5/JS 中使用模式绘制图像
【发布时间】：2016-04-27 08:29:40
【问题描述】：
我目前正在处理一个项目，但我似乎无法通过 Google 找到解决方案。我有一个 HTML 画布，我正在使用 ctx.drawImage() 来堆叠几个图像，我遇到的问题是我无法找到一种方法来专门绘制图像 this，使用像 this 这样的模式.无论如何这可以轻松完成，还是我需要尝试在服务器端生成图像然后将其推送到客户端进行绘制？
我尝试绘制的图像顺序如下：
- 背景颜色
- 圆形面具
- 第一个链接的图像（这是我想用图案绘制的图像）
我试图保持前两层可见，并用图案文件覆盖第三层的不透明部分。所有图层都将需要透明的部分设置为透明。
【问题讨论】：
标签：
javascript
canvas
html5-canvas
【解决方案1】：
更新以符合自首次发布此答案以来添加到问题的其他条件：
您没有说明圆形蒙版是否具有填充中心或透明中心，但以下假设为填充中心：
- 绘制字母图像
- 更改补偿。模式为“
source-atop”（有关操作方法，请参见下面的旧答案）
- 绘制图案。您现在有了字母形状的图案。
- 更改补偿。模式为“
destination-over”
- 绘制蒙版，这最终会出现在现有内容的“后面”
- 使用相同的合成为画布填充背景颜色。模式。
旧答案
当然，在画布上绘制第一张图片，前提是它具有 Alpha 通道。
然后将合成模式更改为source-atop（也可以使用source-in，但它会删除未在新像素下结束的现有内容）：
ctx.globalCompositeOperation = "source-atop";
然后在顶部绘制第二张图像。改回正常模式：
ctx.globalCompositeOperation = "source-over";