javascript - 将背景图案添加到 Canvas 中的 png 图像

Question

正如标题所说，我想将背景图案添加到 png 图像(而不是整个 Canvas )。我尝试了各种指南，但它们都是关于通过使用 background-image css 属性或使用 Canvas 的 createPattern 方法向整个 Canvas 添加背景图案。

This这就是我正在创造的。

如您所见， Canvas 上有各种 png 图像(左臂、右臂、 body 等)，它们都是可定制的。现在我想为那些 png 图像添加重复模式。那些重复的图案本身就是一幅图像。

如何通过 svg、fabric 或任何其他方法做到这一点？

Answer 1

一个非常简单的方法是创建一个 FOR 循环来以您需要的大小绘制 PNG 图像。

• 使用 Canvas 宽度/高度值、您的图像大小和您的首选图像距离来确定 您的循环需要运行的迭代次数。

• 在每次迭代中将距离变量增加一个特定值 以便在 x/y 轴上增加距离的 blit 图像。

当循环结束时，您将得到一个模式。