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

我有点不知所措。我对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);
        }
    }
}

函数HexGrid（）{
this.canvas=null；//（画布上下文）
this.borderColor=“#FF0000”//十六进制边框颜色
this.fillColor=“yellow”；//十六进制填充颜色
this.hexSize=20；//十六进制大小默认值
//使用偏移坐标绘制十六进制。
//让我们先做偏移，这应该是最简单的。
//“奇数q”垂直布局
this.O_hex=函数（x，y）{
var WITH=此.HexSize*2；
var Horz=3/4*宽度；
var Vert=数学sqrt（3）/2*宽度；
var Hpos=x*（水平）；
var Vpos=（y*Vert）+（x%2）*（Vert/2））；
这是drawHex（Hpos、Vpos）；
};  
//在画布上画一个十六进制。
this.drawHex=函数（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（）；
对于（var i=0；i这应该可以：

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

this.drawHex=函数（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 var ctx=this.canvas.getContext（'2d'）；//您确定要调用html画布元素的2d上下文的方法吗？是的，就是这样。我在尝试传入画布对象时忙得不可开交，忘了获取2d上下文。Doh！我在另一个地方对它进行了注释，忘了它。谢谢！
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();
  };