
在本文中,我们将使用 FabricJS 创建带有背景图像的画布。 FabricJS 中有两种方法可以改变画布的背景图像。
第一种方法是使用 Canvas 类本身并传递 backgroundImage。
第二种方法是使用setBackgroundColor方法。让我们通过一个示例来了解它们。
方法 1:使用 Canvas 类
在第一种方法中,我们将使用 Canvas类本身,方法是在类的第二个参数中传递backgroundImage。
语法
new fabric.Canvas(element: HTMLElement|String, {backgroundImage: fabric.Image}: Object)参数
元素 - 此参数是
选项(可选) - 此参数是一个对象,它提供对画布进行额外的自定义,backgroundImage 就是其中之一,它将帮助我们自定义背景图像。 backgroundImage将fabric.Image作为指定画布背景图像的值。
示例1
检查以下示例演示了如何使用 FabricJS 创建带有背景图像的 Canvas。由于 FabricJS 在 Canvas API 之上工作,我们将使用 我们还可以在创建画布后使用 Canvas 类中提供的 setBackgroundImage 方法。让我们仔细看看如何实现这一目标。 image - 此参数接受fabric.Image或引用的字符串我们想要设置背景的图像的 URL。 callback - 此参数采用回调函数当图像加载并设置为背景时调用。 选项(可选): - 此参数是我们可以在其中指定背景图像选项的对象。我们可以更改不透明度、放大或缩小图像等。 首先,我们将图像 URL 分配给一个变量并将其用作第一个参数。在第二个参数中,我们将在设置背景图像后使用 renderAll() 方法绑定画布,如下面的代码所示 - Here we have used the setBackgroundImage method.
Creating a Canvas with a Background Image in Fabric.js
方法 2:使用 setBackgroundImage 方法
语法
canvas.setBackgroundImage(image: fabric.Image | String, callback: function, options: Object)
参数
示例 2
Creating a Canvas with a Background Image in Fabric.js










