Fabric.js 图片 visible 属性

Fabric.js 是一个用于处理画布的 JavaScript 库。画布图片是 fabric.js 的一种类，可以用来创建图片实例。画布图片意味着图片是可移动的，并且可以根据需求进行拉伸。图片的 visible 属性 用于设置图片是否可见。

实现方法： 首先导入 fabric.js 库。导入库之后，在 body 标签中创建一个包含图片的画布区块。之后，使用 Fabric.JS 提供的 Canvas 类和 image 类来创建一个 Canvas 实例和一个 image 实例，并使用 visible 属性来设置画布图片的可见属性。然后，在画布上渲染图片。

语法：

fabric.Image(image, {
   visible: Boolean
});

参数: 此函数接受一个参数，如上所述，在下面进行描述：

visible: 此参数接受一个布尔值，用于设置画布图像的可见属性。

示例: 此示例使用FabricJS来设置画布图像的可见属性，如下所示：

<!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>  
    <h1 style="color: green;">  
        GeeksforGeeks  
    </h1>  
  
    <b>  
        Fabric.js | Image visible Property  
    </b>  
      
    <canvas id="canvas" width="400" height="300"
        style="border:2px solid #000000">  
    </canvas>  
  
    <img src=  
"https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"
        width="100" height="100" id="my-image"
        style="display: none;">  
    <br>  
  
    <button onclick="vis()">Clickme</button>  
  
    <script>  
  
        // Creating the instance of canvas object  
        var canvas = new fabric.Canvas("canvas");  
  
        // Getting the image  
        var img = document.getElementById('my-image');  
  
        // Creating the image instance  
        var imgInstance = new fabric.Image(img, {  
        });  
  
        function vis() {  
            imgInstance = new fabric.Image(img, {   
                visible: false 
            });  
            canvas.clear();  
  
            // Rendering the image to canvas  
            canvas.add(imgInstance);  
  
            canvas.centerObject(imgInstance);  
        }  
        canvas.add(imgInstance);  
        canvas.centerObject(imgInstance);  
    </script>  
</body>  
  
</html>

输出：