动态添加新的织物画布

Question

我正在从事一个项目，该项目需要创建多个 canvas 元素（单独的条形图，每个条形图代表一个不同的渐变）。我想用 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）生成新结构 canvas，或者，
将自动生成的新 canvas 元素附加到 DOM？（不带参数的形式 fabric.Canvas() 会产生……某种东西……但它不能与 appendChild 一起使用）

根据 fabric.js documentation，fabric.Canvas 构造函数接受 HTML 元素或字符串元素 ID。我只能让它与字符串一起工作。

Answer 1

函数fabric.Canvas is a constructor, you have to call it with the new operator:

var gradCanvas = new fabric.Canvas(newCanvas, {width: 500, height:50});

Answer 2

由于 <div id="canvas"> </div>

，我收到了上述错误

确保您的 html 元素应该是 canvas

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

Answer 3

当我们想动态添加canvas并想调用canvas fabric API时，我们需要像这样给一个不同的名字..

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

html_canvas.id = "CursorLayer";

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

现在我们可以在这个canvas

上执行所有结构操作

动态添加新的织物画布

Dynamically adding new fabric canvases

html

javascript

canvas

fabricjs