Question

嘿所以我正在制作一个HTML5游戏，我希望在画布上制作按钮。

     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和y时，它们都完全相同。

Answer 1

按钮最终被单独绘制..但是当我在代码中控制x和y时，它们都完全相同。

这是因为您要将值分配给全局变量self，which already exists, and refers to the window object。

所以你并没有像你想象的那样使用单独的变量，而是使用同一个 - 每次都覆盖它的x，y，......属性。

将此作为第一行插入到您的函数中，以创建 local 变量并将其初始化为空对象：

var self = {};

如果不将其初始化为（空）对象，您将收到类似Uncaught TypeError: Cannot set property 'x' of undefined之类的错误消息。唯一的原因是你的代码没有得到这个，因为self之前已经是一个现有的对象。

但是为了避免混淆，最好选择一个不同的变量名称 - 使用_self代替将对象本身存储在对象中非常常见。

画布矩形具有相同的x和y但不应该是

1 个答案: