Question

我有点难过。我仍然是Javascript的新手，因此当涉及到类和对象时，它的一些工作方式使我无法理解。我有一些相关的代码，我在一个简单的javascript文件中工作，将它重构为一个工作类似乎很自然。这个过程进展不顺利。

经过大量Stackoverflow以及Google和W3Cschool的搜索后，我现在迷路了。

构建这个类时，允许调用环境定义画布上下文并将该上下文传递给我的类似乎很自然，因此它可以对它起作用。但是，因为在浏览器看到它时，它尚未定义。在做了一些搜索之后，我想出了以下内容：

function HexGrid () {
    this.canvas         = null;                 // (canvas Context)
    this.borderColor    = "#FF0000";            // Hex Border Color
    this.fillColor      = "yellow";             // Hex Fill Color
    this.hexSize        = 20;                   // Hex Size Default

    // Draw a hex using Offset Coordinates.
    // Lets do Offset first, this should be the easiest.
    // “odd-q” vertical layout
    this.O_hex = function (x, y) {
        var width = this.HexSize * 2;
        var Horz = 3 / 4 * width;
        var Vert = Math.sqrt (3) / 2 * width;
        var Hpos = x * (Horz);
        var Vpos = (y * Vert) + ( (x%2)*(Vert/2) );
        this.drawHex(Hpos, Vpos);
    };  

    // Draw a Hex onto the Canvas.
    this.drawHex = function (in_x,in_y) {
        console.log ('Canvas = ' + this.canvas);
        var ctx = this.canvas;
        console.log ('ctx = ' + ctx);
        ctx.strokeStyle = this.borderColor;
        console.log ('ctx = ' + ctx);
        ctx.beginPath();
        for (var i = 0; i <= 6; i++) {
            angle = 2 * Math.PI / 6 * i
            x_i = in_x + size * Math.cos(angle);
            y_i = in_y + size * Math.sin(angle);
            if (i === 0) {
                ctx.moveTo (x_i, y_i);
            } else {
                ctx.lineTo (x_i, y_i);
            }
        }
        ctx.fillStyle=this.fillColor;
        ctx.fill();
        ctx.stroke();
    };  
}

////  TESTING CODE //////
function main () {
    Hex = new HexGrid;
    Hex.canvas = document.getElementById('canvas_1');

    for (var x = 0; x <= 10; x += 1) {
        for (var y = 0; y <= 10; y += 1) {
            Hex.O_hex (x,y);
        }
    }
}

我现在得到的是控制台中的以下内容：

Canvas = [object HTMLCanvasElement] hex-a27.js:24
ctx = [object HTMLCanvasElement] hex-a27.js:26
ctx = [object HTMLCanvasElement] hex-a27.js:28
Uncaught TypeError: Object #<HTMLCanvasElement> has no method 'beginPath' hex-a27.js:29
HexGrid.drawHex hex-a27.js:29
HexGrid.O_hex hex-a27.js:19
main hex-a27.js:53
onload Aquarius-a27.php:8

对我来说，我确实有一个插入ctx的画布参考，但它说它找不到beginPath（）方法。我担心我的作业甚至没有进入画布上下文。从Javascript访问DOM元素的方法的正确方法是什么，在评估代码时可能不存在？（即您稍后创建并将其传递，或将其分配给属性。）

基本上，我需要某种类型的原型设计（在这里思考C'ish）说：“是的，会有一个名为beginPath（）的方法和一个名为strokeStyle的属性，所以，如果你能找到的话，不要惊慌失措他们还是......或者我只是需要另一种有效的方法。

感谢。

Answer 1

这应该有效：

this.drawHex = function (in_x,in_y) {
    console.log ('Canvas = ' + this.canvas);
    var ctx = this.canvas.getContext('2d');
    console.log ('ctx = ' + ctx);
    ctx.strokeStyle = this.borderColor;
    console.log ('ctx = ' + ctx);
    ctx.beginPath();
    for (var i = 0; i <= 6; i++) {
        angle = 2 * Math.PI / 6 * i
        x_i = in_x + size * Math.cos(angle);
        y_i = in_y + size * Math.sin(angle);
        if (i === 0) {
            ctx.moveTo (x_i, y_i);
        } else {
            ctx.lineTo (x_i, y_i);
        }
    }
    ctx.fillStyle=this.fillColor;
    ctx.fill();
    ctx.stroke();
  };

Javascript，从类中的变量访问canvas方法

1 个答案: