javascript - Fabric.js 中的多个 Canvas (页面)

Question

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

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

Answer 1

我对您的问题的理解是您在单个 HTML 文档中创建了多个 Canvas 。

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

/* 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。