不会在画布上绘制矩形

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();