将背景图案添加到画布中的 png 图像

Question

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

This 是我正在创建的。

如您所见，画布上有各种 png 图像（左臂、右臂、身体等），它们都是可自定义的。现在我想为这些 png 图像添加重复模式。那些重复的图案本身就是一个图像。

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

Answer 1

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

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

• 在每次迭代中，将距离变量增加一个特定值 为了在 x/y 轴上越来越远的距离对图像进行 blit。

当循环结束时，你会有一个模式。