Javascript 动态添加新的织物画布

我正在从事一个需要创建多个画布元素（每个单独的条表示一个不同的渐变）的项目。我想用fabric.js动态地完成这项工作，例如：

 function add_gradient(color_stops){
     // Add a new rectangular canvas with fill representing specified gradient
     var grad_box = document.getElementById("divWithCanvases");

     var newCanvas = document.createElement("canvas");
     grad_box.appendChild(newCanvas);

     var gradCanvas = fabric.Canvas(newCanvas, {width: 500, height:50});
     var ctx = gradCanvas.getContext('2d');
     // Do stuff to canvas...
 }

但是，调用

fabric.Canvas

失败，错误为“this.initialize is undefined”。（fabric.js第1627行，版本1.4.13）

我怎样才能：

基于HTML元素（而不是字符串id）生成新的结构画布，或

是否将自动生成的新画布元素附加到DOM？（不带参数的窗体fabric.Canvas（）将生成…某物…但不能与

appendChild

一起使用）

根据，构造函数接受HtmleElement或string元素id。我只能使它与字符串一起工作。

函数是构造函数，您必须使用以下命令调用它：

---

由于

确保您的html元素应该是画布

<canvas id="canvas"> </canvas>

---

当我们想要动态添加画布并想要调用画布结构API时，我们需要给出一个不同的名称，如下图所示。

var html_canvas = document.createElement('canvas');

html_canvas.id = "CursorLayer";

var canvas = new fabric.Canvas(html_canvas, canvasConfigOptions);
// canvasConfigOptions is optional

---

现在我们可以在此

画布上执行所有结构操作了

，感谢您捕捉到这一点。确认它可以工作，并且可以使用此语法从元素创建结构画布。

var html_canvas = document.createElement('canvas');

html_canvas.id = "CursorLayer";

var canvas = new fabric.Canvas(html_canvas, canvasConfigOptions);
// canvasConfigOptions is optional