奇怪的畫布導致我的井字遊戲

Question

我目前正在嘗試創建一個井字遊戲。

當我運行它時，畫布上的圖畫完全搞砸了。直到下一個十字被繪製並且在十字和圓之間有奇怪的線，才繪製圓。 （試圖張貼圖片，但需要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（）。 否則繪畫將會堆積起來。