1

我目前正在尝试创建一个井字游戏。

当我运行它时，画布上的图纸完全搞砸了。在绘制下一个十字之前不会绘制圆圈，并且在十字和圆圈之间有奇怪的线条。（试图发布图片，但需要 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 新手，因此非常感谢所有帮助。

4

2 回答 2

1

你的第二个 ctx.stroke 缺少括号，所以它不会画圆。但是圆圈已添加到开放路径中，因此在您稍后调用 ctx.stroke() 时会绘制

于 2013-11-03T20:26:43.087 回答
0

每次开始路径时尝试添加 ctx.beginPath()。否则平局只会堆积起来。

于 2013-11-03T19:55:09.430 回答