Question

我有一个使用fabric.js 1.7.21设置的画布，我收到了这个错误：

Uncaught TypeError: canvas.clear is not a function
    at clearcan (myapp.js:25)
    at HTMLButtonElement.onclick (index.html:43)

来自myapp.js：

function clearcan() {
  var txt;
  if (confirm("Chuck this?") == true) {
    canvas.clear().renderAll();
    newleft = 0;
  }
}

来自我的index.html：

<button onclick="clearcan();" type="button"></button>

我不确定发生了什么。我错过了什么？

Here's a JSFiddle.

Answer 1

您正在自调整函数中初始化canvas实例，因此您的clearcan（）函数中没有canvas实例。

删除该功能，它将在全局范围内，因此您可以在其他功能中访问它。此处已更新fiddle

var canvas = this.__canvas = new fabric.Canvas('canvas');
function clearcan() {
  var txt;
  if (confirm("Chuck this?")) {
    canvas.clear().renderAll();
    newleft = 0;
  }
}

Answer 2

在HTML5 Canvas教程中 - https://www.html5canvastutorials.com/advanced/html5-clear-canvas/说：

要清除HTML5 Canvas，我们可以使用clearRect（）方法清除画布位图。

所以请尝试

context.clearRect（0,0，canvas.width，canvas.height）;

Answer 3

使用fabricJS删除画布上存在的所有对象的最佳方法是

 var objectsInGroup= this.canvas.getObjects().map(function(o) {
  return o.set('active', true);
});
canvas.discardActiveGroup();
objectsInGroup.forEach(function(object) {
canvas.remove(object);
});

未捕获的TypeError：canvas.clear不是函数

3 个答案: