不会在画布上绘制矩形

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

要使用自引用的方法，您可以这样做：

• 改为使用构造函数创建对象-否则，在将对象分配给导致错误的变量之前，您将无法引用其定义。
• 使用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();

现在，它将像你的一样工作。

Answer 2

您正在创建两个独立的画布。定义ctx属性时，应参考前面创建的canvas属性。定义对象后，从对象定义中删除ctx并将其添加到下面：

var oCanvas = {

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

Answer 3

更新:看起来我被打败了，这是一个更好的解决方案：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"),
...