キャンバスの四角形はxとyは同じですが、同じではありません。

Question

ちょっと私はHTML5のゲームを作っていますし、キャンバス上にボタンを作りたいと思っています。

私は2つのボタンにする私のコードのどこか、ボタンを作るために私の機能です

 Button = function(text, x, y, width, height){ 
      self.x = x; 
      self.y = y; 
      self.width = width; 
      self.height = height; 

      self.createButton = function(){ 
       ctx.save(); 
       ctx.fillStyle = "yellow"; 
       ctx.fillRect(self.x, self.y, self.width, self.height); 

       ctx.fillStyle = "black"; 
       ctx.font = '30px Arial'; 
       ctx.fillText(self.text, self.x, self.y + (self.height/2)); 

       ctx.restore(); 
      } 

     self.createButton(); 

     return self; 
    } 

-

 var button1 = Button('Button 1', WIDTH/2, HEIGHT/2, 200, 40); 

     var button2 = Button('Button 2', WIDTH/2, (HEIGHT/2) + 50, 200, 40); 

     console.log('button1 x: ', button1.x); 
     console.log('button1 y: ', button1.y); 


     console.log('button2 x: ', button2.x); 
     console.log('button2 y: ', button2.y); 

ボタンが個別に描かれている羽目になる..しかし、私は、xとYSを慰めるときにコードではまったく同じです。

Answer 1

ボタンは別々に描かれていますが、コード内のxとysをコンソールで操作すると、まったく同じです。あなたはグローバル変数self、which already exists, and refers to the window objectに値を代入しているためである

。

ここで別々の変数を使っているわけではありませんが、その都度x、y、...の各プロパティを上書きします。

ローカル変数を作成し、空のオブジェクトとしてそれを初期化するために、あなたの関数への最初の行としてこれを挿入します。

var self = {}; 

（空の）オブジェクトとしてそれを初期化せずに、あなたはなるだろうUncaught TypeError: Cannot set property 'x' of undefinedのようなエラーメッセージが表示されます。あなたのコードでこれを取得しなかった理由は、selfが既に以前のオブジェクトだったからです。

しかし、混乱を避けるために、別の変数名を使用することをお勧めします。_selfを使用する代わりに、オブジェクト内に参照を格納するのが一般的です。