如何清除canvas的特定元素？

Question

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

我必须使用两个 canvases 吗？

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>

Answer 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/

如何清除canvas的特定元素？

How to clear a specific element of a canvas?

html

javascript

canvas

html5-canvas

fabricjs