Javascript 使用画布上下文作为全局上下文工作，但在我传递它时不工作_Javascript_Html_Canvas_Web_Html5 Canvas

Javascript 使用画布上下文作为全局上下文工作，但在我传递它时不工作

javascript html canvas web html5-canvas

Javascript 使用画布上下文作为全局上下文工作，但在我传递它时不工作,javascript,html,canvas,web,html5-canvas,Javascript,Html,Canvas,Web,Html5 Canvas,我正在做最后一个项目（交互式Javascript游戏等），决定通过学习canvas和HTML5给自己一个挑战。我也在尝试学习Javascript对象（并组织这么多人似乎把它扔进了一个大的脚本标记中），等等。所以请原谅我可能的一些愚蠢行为：所以目前我的核心正在工作，但我正在尝试制作一个开始屏幕（我将在开始选项后面模糊一个暂停的随机游戏）。这个游戏包括躲避障碍。当我使用全局变量上下文绘制障碍时，一切都正常。当我试图传入一个变量时，它就消失了。以下是有效的方法： var mainCanvas = d

我正在做最后一个项目（交互式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）

中抓取。只是构造器内部的一堆不同的变体。我花了一个多小时研究这个问题，但还没弄明白，所以我想问问你们。可能已经盯着它看太久了

谢谢

this.mainContext=context

是有罪的。您的

匿名创建

函数没有上下文参数。虽然子函数可以访问用

var

声明的变量，但它们不能从父函数访问参数。我撒谎了。我进行了测试，它似乎可以工作。虽然我不太明白这个子函数的意义，但是Javascript是一种非常松散的语言，你可以用异国情调来做事情

当您使用“var”来声明对象内部的内容时，您将声明无法从外部访问的私有成员。除非你打算做一个能手和二传手，否则我不建议你系统地做。我更喜欢这样做：

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

this.mainContext=context

是有罪的。您的

匿名创建

函数没有上下文参数。虽然子函数可以访问用

var

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

this.mainContext=context

是有罪的。您的

匿名创建

函数没有上下文参数。虽然子函数可以访问用

var

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

this.mainContext=context

是有罪的。您的

匿名创建

函数没有上下文参数。虽然子函数可以访问用

var

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

当您切换到

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

        };

当您切换到

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

        };

当您切换到

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

        };

当您切换到

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

        };

你能详细谈谈“它死了”吗？是否有错误被抛出？开发者控制台怎么说？它不显示我画的任何矩形。显然我有一些错误。没有任何东西直接归因于我的任何开发文件。。。“未定义url的填充样式”您是否可以扩展到“它死了”？是否有错误被抛出？开发者控制台怎么说？它不显示我画的任何矩形。显然我有一些错误。没有任何东西直接归因于我的任何开发文件。。。“未定义url的填充样式”您是否可以扩展到“它死了”？是否有错误被抛出？开发者控制台怎么说？它不显示我画的任何矩形。显然我有一些错误。没有任何东西直接归因于我的任何开发文件。。。“未定义url的填充样式”您是否可以扩展到“它死了”？是否有错误被抛出？开发者控制台怎么说？它不显示我画的任何矩形。显然我有一些错误。没有任何东西直接归因于我的任何开发文件。。。“未定义url的填充样式”