如何清除画布的特定元素？答案

【问题标题】：How to clear a specific element of a canvas?如何清除画布的特定元素？
【发布时间】：2015-09-09 15:05:29
【问题描述】：

如果我只想清除某个元素，如何使用 Fabric.js 的 canvas.clear？我的意图是在按下“删除”按钮后清除背景，但保留字体。我该如何做到这一点？它们都被添加到画布上，所以如果我使用canvas.clear，它们都会被删除。

我必须使用两个画布吗？

JSFiddle Demo

var canvas = new fabric.Canvas('canvas');

var textObj1 = new fabric.Text('font test', {
  left: 100,
  top: 350,
  fontSize: 30,
  fill: "#FF0000" // Set text color to red
});

canvas.add(textObj1);

fabric.Image.fromURL('http://s17.postimg.org/4740ku7z3/i_Stock_000000284123_XSmall.jpg', function(oImg) {
  // scale image down, and flip it, before adding it onto canvas
  oImg.scale(1);
  oImg.selectable = false;
  canvas.add(oImg);
});

function deleteimg() {
  canvas.clear();
};

<canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>

<button class="button-big" onclick="deleteimg()">delete</button>

【问题讨论】：

感谢 xufox 纠正我的错误并帮助编辑。

标签： javascript html canvas html5-canvas fabricjs

【解决方案1】：

您必须重新绘制除背景之外的所有内容：

function draw( background ) {

    var canvas = new fabric.Canvas( 'canvas' );

    canvas.clear();

    var textObj1 = new fabric.Text('font test', {
        left: 100,
        top: 350,
        fontSize: 30,
        fill: "#FF0000" // Set text color to red
    });

    canvas.add(textObj1);

    if ( background ) {
        fabric.Image.fromURL( 'http://s17.postimg.org/4740ku7z3/i_Stock_000000284123_XSmall.jpg', function (oImg) {
            // scale image down, and flip it, before adding it onto canvas
            oImg.scale(1);
            oImg.selectable = false;
            canvas.add(oImg);
        } );
    }

}

// Call function with background
draw( true );

function deleteimg(){

    // Call function without background
    draw( false );

};

http://jsfiddle.net/o6a2uot4/

【讨论】：

谢谢是我需要的东西，但是有什么方法可以使用 clear 吗？我不想打开和关闭它，因为我需要将背景更改为其他东西。
使用if ( background ) { ... } else { other code; } 而不是if ( background ) { ... }。