动态添加新的织物画布答案

【问题标题】：Dynamically adding new fabric canvases动态添加新的织物画布
【发布时间】：2015-03-13 09:46:22
【问题描述】：

我正在处理一个需要创建多个画布元素（单独的条形图，每个条形图代表一个不同的渐变）的项目。我想用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一起使用）

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

【问题讨论】：

标签： javascript html canvas fabricjs

【解决方案1】：

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

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

【讨论】：

感谢您的关注。确认它可以工作，并且可以使用此语法从元素创建织物画布。

【解决方案2】：

由于<div id="canvas"> </div>，我收到了上述错误

确保你的 html 元素应该是 canvas

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

【讨论】：

【解决方案3】：

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

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

html_canvas.id = "CursorLayer";

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

现在我们可以在这个 canvas

上执行所有结构操作

【讨论】：