如何用Fabric.js实现Canvas按钮切换仅显示单个圆形或矩形？

嘿，我来帮你搞定这个切换图形的小问题～

你遇到的核心问题是：直接使用原生Canvas的context.clearRect()无法同步Fabric.js的内部对象管理机制。Fabric.js会维护一个自己的画布对象集合，你之前的清除操作只是清空了视觉上的画布，但Fabric内部还保留着之前添加的图形对象，所以切换时会出现重叠。

修正后的完整代码 #

<html>
<head>
  <script src="fabric.js"></script>
</head>
<body>
  <canvas id="c" width="500" height="500"></canvas>
  <button type="button" onclick="drawArc()">circle</button>
  <button type="button" onclick="drawRect()">rectangle</button>
  
  <script>
    var canvas = new fabric.Canvas("c");
    
    // 补全矩形和圆形的必要属性，确保能正常显示
    var rect = new fabric.Rect({
      left: 100,
      top: 100,
      width: 150,
      height: 100,
      fill: '#ff0000'
    });
    
    var circle = new fabric.Circle({
      left: 200,
      top: 200,
      radius: 70,
      fill: '#00ff00'
    });
    
    function clear() {
      // 使用Fabric.js自带的clear方法，彻底清除画布上的所有对象
      canvas.clear();
    }
    
    function drawRect() {
      clear();
      canvas.add(rect);
    }
    
    function drawArc() {
      clear();
      canvas.add(circle);
    }
  </script>
</body>
</html>

关键修改点说明 #

• 移除原生Context操作：不需要手动获取canvas.getContext('2d')，Fabric.js已经封装了所有画布操作，直接使用它提供的API即可。
• 替换清除方法：用canvas.clear()替代context.clearRect()，这个方法会同时清空Fabric内部的对象集合和视觉画布，确保旧图形被完全移除。
• 补全图形属性：给矩形和圆形对象添加了位置、尺寸、填充色等必要属性，不然图形无法正常渲染出来（你之前的代码里只写了注释占位）。

这样修改后，每次点击按钮都会先彻底清空画布，再添加新的图形，就能保证同一时间只显示最后点击的那个图形啦～

内容的提问来源于stack exchange，提问作者elli