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

Use a pattern to draw an image in HTML5/JS

本文关键字：JS 绘制 图像 HTML5 模式      更新时间：2023-09-26

我目前正在做一个项目，我似乎无法在谷歌上找到解决方案。我有一个 HTML 画布，我正在使用 ctx.drawImage（） 来堆叠几个图像，我遇到的问题是我无法找到一种方法来专门绘制图像，使用这样的模式。无论如何，这很容易完成，还是我需要尝试在服务器端生成图像然后将其推送到客户端进行绘制？

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

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

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

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

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

  • 绘制字母图像
  • 将补偿模式更改为"source-atop"（请参阅下面的旧答案）
  • 绘制图案。您现在拥有字母形状的图案。
  • 将补偿模式更改为"destination-over"
  • 绘制蒙版，这将最终"落后于"现有内容
  • 使用相同的合成模式用背景色填充画布。

旧答案

当然，将

第一个图像绘制到画布上，前提是它具有 alpha 通道。

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

ctx.globalCompositeOperation = "source-atop";

然后在上面画第二个图像。要更改回正常模式：

ctx.globalCompositeOperation = "source-over";
相关文章：