Question

我正在尝试制作一个井字游戏，我是javascript的新手。我确实设法在没有功能的情况下制作电路板，但我想让它更有效，所以我尝试使用一个功能。有帮助吗？感谢。

function drawLine(fromX, fromY, toX, toY){ // draws a line inside the canvas from first 2 spots to second 2.
    this.context.moveTo(fromX, fromY);
    this.context.lineTo(toX, toY);
    this.context.stroke();
}

this.drawLine(100, 0, 100, 300);
this.drawLine(200, 0, 200, 300);
this.drawLine(0, 100, 300, 100);
this.drawLine(0, 200, 300, 200);

https://jsfiddle.net/kbXAN/30/

Answer 1

我不确定你为什么会有这么多。但是我已经为你修好了。

var gameBoard = {
start : function(){
    var canvas = document.createElement("canvas")
    document.body.insertBefore(canvas, document.body.childNodes[0]);
    const c = document.querySelector('canvas');
    const ctx = c.getContext('2d');
    c.width = 300;
    c.height = 300;

    function drawLine(fromX, fromY, toX, toY){ // draws a line inside the canvas from first 2 spots to second 2.
            ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();

    }

    drawLine(100, 0, 100, 300);
    drawLine(200, 0, 200, 300);
    drawLine(0, 100, 300, 100);
    drawLine(0, 200, 300, 200);

    /*
    this.context.moveTo(100, 0);
    this.context.lineTo(100,300);  // draw line 1
    this.context.stroke();

    this.context.moveTo(200, 0);
    this.context.lineTo(200,300);  // draw line 2
    this.context.stroke();

    this.context.moveTo(0, 100);
    this.context.lineTo(300,100);  // draw line 3
    this.context.stroke();

    this.context.moveTo(0, 200);
    this.context.lineTo(300,200);  // draw line 1
    this.context.stroke();
    */
    }

https://jsfiddle.net/7tjz2mqs/1/

我的drawLine（）javascript函数有什么问题？

1 个答案: