不會在畫布上繪製矩形

Question

我已經創建了2個對象。一個創建一個畫布對象並將其附加到html的主體，另一個應繪製一個不是的矩形。我究竟做錯了什麼？

window.onload = function(){ 


    var oCanvas = { 

     canvas : document.createElement("canvas"), 
     ctx : document.createElement("canvas").getContext("2d"), 

     create : function(){ 
      oCanvas.canvas.id = "canvas"; 
      oCanvas.canvas.width = 350; 
      oCanvas.canvas.height = 350; 
      oCanvas.canvas.style.background = "yellow"; 
      document.body.appendChild(oCanvas.canvas); 

     } 
    }; 
    var oMap = { 
     createGrid : function(){ 
      oCanvas.ctx.fillRect(50, 25, 150, 100); 
     } 
    }; 

    oCanvas.create(); 
    oMap.createGrid(); 

}; 

Answer 1

您正在創建兩個單獨的畫布。在定義ctx屬性時，應參考之前創建的canvas屬性。從對象定義中刪除ctx，並將其添加時，一旦對象已經定義：

var oCanvas = { 

    canvas : document.createElement("canvas"), 
    ... 
} 
oCanvas.ctx = oCanvas.canvas.getContext("2d"); 

Answer 2

更新：看來我是打了，這是一個更好的解決方案：https://stackoverflow.com/a/20009730/1634430

你正在創建2種元素，並畫錯了。解決方案在這裏：http://codepen.io/zshift/pen/gxoEA。的

代替

... 
canvas : document.createElement("canvas"), 
ctx : document.createElement("canvas").getContext("2d"), 
... 

你應該寫

var element = document.createElement("canvas"); 

... 
canvas: element, 
ctx: element.getContext("2d"), 
... 

Answer 3

要使用自引用，你可以做到這一點，而不是這樣的方法 -

• 與構造函數創建一個對象相反 - 否則在對象分配給va之後，您將無法引用其定義可引起錯誤。
• 使用new關鍵字創建對象的新實例。

現在，您可以通過使用例如原型進一步改進它，但是爲了簡單：

function myCanvas() { 

    /// create a reference to ourselves (saves us some headache later) 
    var me = this; 

    /// create a canvas as a property on this instance 
    this.canvas = document.createElement("canvas"); 

    /// now this.canvas exists and we can get the context 
    this.ctx = this.canvas.getContext("2d"), 

    /// metod create which references 'me' 
    this.create = function(){ 
     me.canvas.id = "canvas"; 
     me.canvas.width = 350; 
     me.canvas.height = 350; 
     me.canvas.style.background = "yellow"; 
     document.body.appendChild(me.canvas); 
    } 
}; 

/// create an instance (you can create several of this) 
var oCanvas = new myCanvas(); 

現在將作爲你can see in this demo。

Answer 4

如果這是一個單獨的對象，您可以將它保留爲對象字面值，但如果要創建多個實例，則可以使用構造函數和原型。對構造函數和原型的介紹可以在here找到。

假設有隻使用一個oCanvas例如，您可以更改您的代碼：

var oCanvas = { 

    canvas : document.createElement("canvas"), 
    ctx : null,/can't set it to anything yet 
      //oCanvas doesn't exist yet here 

    create : function(){ 
     oCanvas.canvas.id = "canvas"; 
     oCanvas.canvas.width = 350; 
     oCanvas.canvas.height = 350; 
     oCanvas.canvas.style.background = "yellow"; 
     document.body.appendChild(oCanvas.canvas); 
     //set the context now 
     this.ctx = this.canvas.getContext("2d"); 
    } 
}; 
var oMap = { 
    createGrid : function(){ 
     oCanvas.ctx.fillRect(50, 25, 150, 100); 
    } 
}; 

oCanvas.create(); 
oMap.createGrid();