Fabric.js中的多個畫布（頁面）

Question

我試圖創建多個頁面作爲使用Fabric.js的畫布，單擊按鈕 - 例如，每次點擊按鈕時都會創建一個新頁面。

我遇到的問題是我希望這些畫布使用與在頁面加載時創建的相同函數，並且只將其分配給初始畫布。有沒有辦法創建畫布的實例，仍然使用這些相同的功能？

Answer 1

我對你的問題的理解是，你正在一個HTML文檔中創建多個畫布。

當您將函數分配給初始畫布時，是否將它們作爲方法添加到畫布對象中？我認爲最好將canvas放在另一個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。