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的调用失败并出现错误＆＃34; this.initialize未定义＆＃34;。（fabric.js第1627行，版本1.4.13）

我怎么能：

基于HTML元素（而不是字符串id）或
将自动生成的新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});

Answer 2

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

，我遇到了上述错误

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

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

Answer 3

当我们想要动态添加画布并想要调用画布结构 API 时，我们需要像这样给出一个不同的名称..

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

html_canvas.id = "CursorLayer";

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

现在我们可以在这个canvas

上执行所有结构操作

动态添加新的织物画布

3 个答案: