Question

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

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

Answer 1

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

在为初始画布分配函数时，是否意味着它们是作为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。

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

1 个答案: