Question

所以我一直在研究神经网络，我今天早些时候正在清理代码，这样我就可以把它包含在2个库中（作为对象），这样我就不必担心图形了，可以担心实际的逻辑。我已经检查了JSHint.com（基本上是JSLint的一个版本），我的代码似乎没有任何问题。但是，当我尝试运行我的代码时，我得到错误this.ctx未定义。我试图删除 this 关键字，但是ctx未定义。这是我的代码的副本。我在已经创建了画布的基本模板中运行它，因此不需要init函数中的第一个方法。所以我的问题是：

•为什么this.ctx未定义？

•当我从控制台执行init，drawNodes和drawNodeConnectors时，为什么这样做？

•除了全局变量之外，有没有什么方法可以避免使用this关键字？

var graphics = {
    init: function(overlay){
        if(!overlay){
            this.newCanvas = document.createElement('canvas');
            this.newCanvas.id = "canvas";
            this.width = 640;
            this.height = 360;
            document.body.appendChild(this.canvas);
        }
        this.canvas = document.getElementById('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

        this.pi = Math.PI;
    },
    blackout: function(){
        this.ctx.fillStyle = "black";
        this.ctx.globalAlpha = 1;
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    },
    drawCircle: function(x, y, radius){
        this.ctx.beginPath();
        this.ctx.fillStyle = "white";
        this.ctx.strokeStyle = "white";
        this.ctx.globalAlpha = 1;
        this.ctx.arc(x, y, radius, 0, this.pi*2);
        this.ctx.stroke();
        this.ctx.fill();
    },
    drawLine: function(x1, y1, x2, y2, alpha){
        this.ctx.beginPath();
        this.ctx.strokeStyle = "white";
        this.ctx.lineWidth = 5;
        this.ctx.globalAlpha = alpha;
        this.ctx.moveTo(x1, y1);
        this.ctx.lineTo(x2, y2);
        this.ctx.stroke();
        this.ctx.closePath();
    },
    drawText: function(x, y, text, size){
        this.ctx.font = size+"px Times";
        this.ctx.fillText(text, x, y);
    },
    textOffset: function(text, size){
        this.ctx.font = size+"px Times";
        return this.ctx.measureText( text.toString() ).width / 2;
    },
    drawNodes: function(){
        this.drawCircle(100, 100, 50);
        this.drawCircle(100, 260, 50);

        this.drawCircle(300, 75, 25);
        this.drawCircle(300, 180, 25);
        this.drawCircle(300, 285, 25);

        this.drawCircle(500, 180, 75);
    },
    genWeights: function(){
        for(this.i = 1; this.i < 9; this.i ++){
            eval("this.w" + this.i + " = Math.random();");
        }
    },
    drawNodeConnectors: function(){
        this.ctx.fillStyle = "white";
        this.drawLine(100, 100, 300, 75, this.w1);
        this.drawLine(100, 100, 300, 180, this.w2);
        this.drawLine(100, 100, 300, 285, this.w3);

        this.drawLine(100, 260, 300, 75, this.w4);
        this.drawLine(100, 260, 300, 180, this.w5);
        this.drawLine(100, 260, 300, 285, this.w6);

        this.drawLine(300, 75, 500, 180, this.w7);
        this.drawLine(300, 180, 500, 180, this.w8);
        this.drawLine(300, 285, 500, 180, this.w9);
    },
    nodeText: function(in1, in2, node1, node2, node3, output1, output2){
        this.ctx.fillStyle = "black";
        this.ctx.globalAlpha = 1;
        this.text(100 - this.textOffset(in1, 36), 100, in1.toString(), 36);
        this.text(100 - this.textOffset(in2, 36), 260, in2.toString(), 36);

        this.text(300 - this.textOffset(node1, 20), 75, node1.toString(), 20);
        this.text(300 - this.textOffset(node2, 20), 180, node2.toString(), 20);
        this.text(300 - this.textOffset(node3, 20), 285, node3.toString(), 20);

        this.text(500 - this.textOffset(output1, 100), 180, output1.toString(), 100);
        this.text(500 - this.textOffset(output2, 25), 225, output2.toString(), 25);
    },
    test: function(){
        this.blackout();
        this.init(true);
        this.drawNodes();
        this.genWeights();
        this.drawNodeConnectors();
    }
};
graphics.test();

Answer 1

您先拨打blackout，然后再拨打init。 init是ctx定义的地方。

使用javascript库时遇到困难：this.ctx未定义

1 个答案: