Прямоугольник не будет нарисован на холсте

Question

Я создал 2 объекта. Один создает объект canvas и добавляет его в тело 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

UPDATE: Кажется, я был выбит, и это лучшее решение: 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();