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

时间:2015-01-02 08:28:32

标签: javascript html5 canvas fabricjs

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

This正是我创造的。

如您所见,画布上有各种png图像(左臂,右臂,身体等),它们都可以自定义。现在我想为那些png图像添加重复模式。那些重复模式将是一个图像本身。

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

1 个答案:

答案 0 :(得分:0)

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

  • 使用画布宽度/高度值,图像尺寸首选图像距离来确定 你的循环需要运行迭代次数

  • 在每次迭代中,将距离变量增加到某个值 为了在x / y轴上以越来越大的距离对图像进行blit。

当循环结束时,你将有一个模式。