动态添加新的织物画布

Question

我正在开发一个需要创建多个画布元素（单独的条形，每个条形代表一个不同的渐变）的项目。我想用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 未定义”。（fabric.js 第 1627 行，版本 1.4.13）

我怎样才能：

1. 基于 HTML 元素（而不是字符串 id）生成一个新的织物画布，或者，
2. 将自动生成的新画布元素附加到 DOM？（不带参数的fabric.Canvas() 形式会使...某事...但它不能与 一起使用appendChild）

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

Answer 1

函数fabric.Canvas是一个构造函数，你必须用new 操作符调用它：

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