Fabric.js Canvas backgroundImage属性

在本文章中，我们将看到如何使用backgroundImage属性设置Canvas的背景图像在Fabric.js中使用Canvas作为在HTML中提供的原始canvas对象的包装器。它提供了对底层canvas的高级访问，使其具有对象模型，允许解析SVG文件，并以直观的方式与canvas进行交互。

方法： 为了实现这一点，我们将使用一个叫做Fabric.js的JavaScript库。在导入库之后，我们将在body标签中创建canvas块。之后，我们将初始化由Fabric.js提供的canvas对象的一个实例，并使用backgroundImage属性更改canvas的背景图像。

语法：

fabric.Canvas(canvasElement, {
    backgroundImage: String | Fabric.Image
});

参数： 此属性接受一个单一参数，如上所述并在下面描述。

backgroundImage： 它是一个包含图像 URL 或 Fabric.Image 对象的字符串，用于指定 Canvas 的背景图像。

下面的示例演示了如何在 JavaScript 中使用 Fabric.js Canvas backgroundImage 属性。

示例 1： 此示例使用字符串 URL 来更改 Canvas 的背景图像。

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Adding the FabricJS library -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
    </script> 
</head> 
  
<body> 
    <div style="text-align:center;width:500px;"> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <b> 
            Fabric.js | Canvas backgroundImage Property 
        </b> 
    </div> 
  
    <canvas id="canvas" width="660" height="250" 
        style="border:1px solid #000000"> 
    </canvas> 
  
    <script> 
  
        // Initiate a Canvas instance  
        let canvas = new fabric.Canvas("canvas", { 
  
            // Set the background image  
            // of the Canvas 
            backgroundImage: 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" 
        }); 
    </script> 
</body> 
  
</html>

输出：

Fabric.js Canvas backgroundImage属性

示例 2: 此示例使用一个Fabric.Image对象来更改Canvas的背景图像。

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Adding the FabricJS library -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
    </script> 
</head> 
  
<body> 
    <div style="text-align: center; 
              width:660px;"> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <b> 
            Fabric.js | Canvas backgroundImage Property 
        </b> 
    </div> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
        id="my_img" style="display:none"> 
  
    <canvas id="canvas" width="660" height="250" 
        style="border:1px solid #000000"> 
    </canvas> 
  
    <script> 
  
        // Select the image from the document 
        let selectedImage = 
            document.querySelector("#my_img"); 
  
        // Create a Fabric.Image object 
        let bg_img = new fabric.Image(selectedImage); 
  
        // Initiate a Canvas instance  
        let canvas = new fabric.Canvas("canvas", { 
  
            // Set the background image 
            // of the Canvas to the above 
            // Fabric.Image object 
            backgroundImage: bg_img 
        }); 
    </script> 
</body> 
  
</html>

输出:

Fabric.js Canvas backgroundImage属性