canvas - 画布-您可以将坐标设置为新的零点以相对于定位元素吗？

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