Question

我目前正在尝试创建一个Tic Tac Toe游戏。

当我运行它时，画布上的绘图完全搞砸了。在绘制下一个十字架之前不会绘制圆圈，并且在十字架和圆圈之间存在奇怪的线条。（试图张贴图片，但需要10个代表）

我不知道为什么会这样，但我知道这个问题出现在绘图过程中。

function drawIt(w, h, p) {
    //w is the x coordinates for the square where it is supposed to draw
    //the h is the y coordinates and p is just the number of the square
    if (turn == 0 && !pressed[p]) {
        ctx.moveTo(w, h);
        ctx.lineTo(w + (width / 3), h + (height / 3));
        ctx.moveTo(w + (width / 3), h);
        ctx.lineTo(w, h + (height / 3));
        ctx.stroke();
        turn = 1;
        pressed[p] = true;
    } else if (turn == 1 && !pressed[p]) {
        ctx.arc(w + (width / 6), h + (height / 6), width / 6, 0, 2 * Math.PI);
        //width and height is just the width and the height of the canvas
        ctx.stroke;
        turn = 0;
        pressed[p] = true;
    } else if (pressed[p]) {
        alert("!!!");
    }
}

我是javascript的新手，所以非常感谢所有帮助。

Answer 1

您的第二个ctx.stroke缺少括号，因此不会绘制圆圈。但是圆圈已被添加到开放路径中，因此在您稍后调用ctx.stroke（）

时绘制

Answer 2

每次开始路径时尝试添加ctx.beginPath（）。否则抽奖就会堆积起来。

奇怪的画布导致我的Tic Tac Toe游戏

2 个答案: