畫布 - 你可以設置一個座標作爲一個新的零點來定位元素相對於？

Question

我目前工作的一個小遊戲，以熟悉畫布啄 - 現在我有了這樣的

function Menu(x,y,width,height,...,game){ 
    this.x  = x; 
    this.y  = y; 
    this.width = width; 
    this.height = height; 
    // ... 

    this.render = function(){ 
     game.stage.fillRect(this.x, this.y, this.width, this.height); // draw background 
     // ... 
     game.stage.fillText("MENU", this.x + 20, this.y + 10); 
    } 
} 

一個菜單類是可以設置的this.x和this.y是某種的默認值，所以我不必每次都要在菜單中定位某個東西時寫this.x + ...？

Answer 1

只需在菜單畫圖功能開始時將您的場景翻譯到菜單位置（this.x，this.y）。之後不要忘記重置它。

我認爲game.stage是一個畫布上下文對象。

game.stage.save(); 
game.stage.translate(this.x, this.y); 

// now (0, 0) becomes (this.x, this.y) 
// ... some drawings 

game.stage.restore();