Fabric.js 中的多个画布（页面）答案

【问题标题】：Multiple canvases (pages) in Fabric.jsFabric.js 中的多个画布（页面）
【发布时间】：2013-11-29 22:14:55
【问题描述】：

我正在尝试通过单击按钮使用 Fabric.js 创建多个页面作为画布 - 例如每次单击按钮时都会创建一个新页面。

我遇到的问题是我希望这些画布使用在加载页面时创建的相同功能，并且只分配给初始画布。有没有办法创建画布实例并仍然使用相同的功能？

【问题讨论】：

【解决方案1】：

我对您的问题的理解是，您正在一个 HTML 文档中创建多个画布。

当你为你的初始画布分配函数时，你的意思是它们被作为方法添加到你的画布对象吗？我认为最好将画布包装在另一个 JavaScript 对象中并将方法分配给该对象。此外，您可以使用原型为类定义方法，然后该类的实例可以访问这些方法。例如：

/* MyCanvas class */
function MyCanvas() {
    /* Creates a canvas */
    this.canvas = document.createElement("canvas");
    document.body.appendChild(this.canvas);
};

/* Define MyCanvas prototype */
MyCanvas.prototype = {
    /* Define getCanvas method */
    getCanvas: function() {
        /* Returns the real canvas object */
        return this.canvas;
    },

    /* Define get2DContext method */
    get2DContext: function() {
        /* Returns the 2D context */
        return this.canvas.getContext("2d");
    }
}

/* Create two canvases */
var myCanvas1 = new MyCanvas();
var myCanvas2 = new MyCanvas();

/* Access MyCanvas methods */
var canvas1 = myCanvas1.getCanvas();
var ctx2 = myCanvas2.get2DContext();

顺便说一句，我从未使用过 fabric.js。

【讨论】：