javascript - 动态添加新的织物 Canvas

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)

我怎样才能:

1. 根据 HTML 元素(而不是字符串 id)生成一个新的 fabric canvas，或者，
2. 将自动生成的新 Canvas 元素附加到 DOM？ (不带参数的形式 fabric.Canvas() 会产生...一些...但它不能与 appendChild 一起使用)

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

Answer 1

函数fabric.Canvas是一个构造函数，你必须用 new operator 调用它:

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