使用 canvas 上下文作为全局工作但在我传递它时不是

Question

我正在做一个期末项目（交互式 Javascript 游戏等）并决定通过学习 canvas 和 HTML5 给自己一个挑战。我也在尝试学习 Javascript 对象（并将这么多人似乎扔进一个大脚本标签的东西组织起来）等等，所以请原谅我可能有些愚蠢。 :)

所以目前我的核心工作正常，但我正在尝试制作一个开始屏幕（我将在开始选项后面模糊一个暂停的随机游戏）。游戏涉及躲避障碍。当我使用全局变量上下文绘制障碍时，一切正常。当我尝试传入一个变量时，它就死了。这是有效的：

var mainCanvas = document.getElementById("objectsToAvoidCanvas");
var mainContext = mainCanvas.getContext('2d');

function Obstacle(){
    var height;
    var width;
    var xPosition;
    var yPosition;
    var isOffScreen;
    var isSafeToAddMore;
    var speed;
    var anonymousCreation = function(){
        this.width = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);
        this.height = Math.floor((Math.random() * window.innerHeight * 0.7) + 1);       

        this.xPosition = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);
        this.yPosition = this.height * -1;

        this.isOffScreen = false;
        this.isSafeToAddMore = false;

        this.speed = 1;

        mainContext.fillStyle = '#009933';
        mainContext.fillRect(this.xPosition, this.yPosition, this.width, this.height);

    };  

    anonymousCreation();

};

Obstacle.prototype.drawInRandomPlace = function(){
    yPosition = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);

    mainContext.fillStyle = '#009933';
    mainContext.fillRect(xPosition, yPosition, width, height);        
};

但是，沿着这些方向的东西中断了：

    function Obstacle(context){
        var height;
        var width;
        var xPosition;
        var yPosition;
        var isOffScreen;
        var isSafeToAddMore;
        var speed;
        var mainCanvas
        var mainContext

var anonymousCreation = function(){
            this.mainContext = context

            this.width = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);
            this.height = Math.floor((Math.random() * window.innerHeight * 0.7) + 1);       

            this.xPosition = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);
            this.yPosition = this.height * -1;

            this.isOffScreen = false;
            this.isSafeToAddMore = false;

            this.speed = 1;

            mainContext.fillStyle = '#009933';
            mainContext.fillRect(this.xPosition, this.yPosition, this.width, this.height);

        };  

        anonymousCreation();

    };


    Obstacle.prototype.drawInRandomPlace = function(){
        yPosition = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);

        mainContext.fillStyle = '#009933';
        mainContext.fillRect(xPosition, yPosition, width, height);
    };

我试过使用 this.mainContext = context 或实际从传递的字符串 document.getElementById(aString) 中抓取。构造函数中只有一堆不同的变体等。已经为此工作了一个多小时但无法弄清楚所以我想我会问你们。估计是盯着看太久了。

谢谢！

Answer 1

this.mainContext = context是有罪的。您的 anonymousCreation 函数没有上下文参数。 ~~虽然子函数可以访问用 var 声明的变量，但它们不能访问父函数的参数。~~ 我撒谎了。我测试了 this 并且似乎 work.I 并没有真正看到子函数的意义，但是 Javascript 是一种非常宽松的语言，你可以用异国情调的方式做事。

当您使用 "var" 声明对象内部的内容时，您声明了无法从外部访问的私有成员。除非您打算制作 getter 和 setter，否则我不建议系统地这样做。我更喜欢这样做：

function MyObject(arg1, arg2) {
    this.property1 = arg1;
    this.property2 = arg2;
}

MyObject.prototype.myFunction = function(arg) {
    console.log(this.property1 + this.property2);
};

sampleInstance = new MyObject(1, 2);

Answer 2

当您切换到 this.mainContext 时，您没有替换 mainContext 的所有其他实例：

 var anonymousCreation = function(){
                this.mainContext = context;

                this.width = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);
                this.height = Math.floor((Math.random() * window.innerHeight * 0.7) + 1);       

                this.xPosition = Math.floor((Math.random() * window.innerWidth * 0.8) + 1);
                this.yPosition = this.height * -1;

                this.isOffScreen = false;
                this.isSafeToAddMore = false;

                this.speed = 1;

                /* old
                mainContext.fillStyle = '#009933';
                mainContext.fillRect(this.xPosition, this.yPosition, this.width, this.height);
                */

                this.mainContext.fillStyle = '#009933'; //added this.
                this.mainContext.fillRect(this.xPosition, this.yPosition, this.width, this.height); //added this.

            };  

            anonymousCreation();

        };

使用 canvas 上下文作为全局工作但在我传递它时不是

Use canvas context works as global but not when I pass it

html

javascript

canvas

html5-canvas

web