Javascript 画布填充样式正在随机更改

我有一张棋盘。当用户将鼠标悬停在平铺上时，它将以黄色高亮显示。当这种情况发生时，游戏边框也将变为黄色，以及最后一个白色跳棋边框

我甚至没有设置跳棋有边界，所以我不知道为什么会发生这种情况

我这样画边界：

context.fillStyle = '#000';
context.lineWidth = Math.min(canvas.width, canvas.height) / 170;

context.rect(board.gapW ,board.gapW, board.w - (board.gapW * 2), board.h - (board.gapH * 2));
context.stroke();

context.fillStyle = (board.info[i][j].c == 1) ? checkers.colours[checkers.colour].p1 : checkers.colours[checkers.colour].p2;
context.beginPath();
context.arc(x + (board.squareW / 2), y + (board.squareH / 2), r, 0, 2 * Math.PI, false);                    
context.fill();

正如你所看到的，我每次都把它设为黑色

我像这样画跳棋：

context.fillStyle = '#000';
context.lineWidth = Math.min(canvas.width, canvas.height) / 170;

context.rect(board.gapW ,board.gapW, board.w - (board.gapW * 2), board.h - (board.gapH * 2));
context.stroke();

context.fillStyle = (board.info[i][j].c == 1) ? checkers.colours[checkers.colour].p1 : checkers.colours[checkers.colour].p2;
context.beginPath();
context.arc(x + (board.squareW / 2), y + (board.squareH / 2), r, 0, 2 * Math.PI, false);                    
context.fill();

在这种情况下，填充样式为黑色或白色，甚至不使用边界线

以下是要查看的实时版本：

边界线是78-82线

---

检查器是第111-114行，这里有两种不同类型的上下文样式：

fillStyle

和

strokeStyle

。您可以在

highlightTile

中将

strokeStyle

设置为

yellow

，但从不取消设置。我相信，如果您将

冲程样式

重置为

绘图板

的一部分，您应该会很好

也就是说，您可能希望在修改画布上下文的函数中使用和方法，以避免这种无意的状态泄漏

当用户将鼠标悬停在平铺上时

在

事件

侦听器中将

笔划样式设置为黄色。当您再次绘制电路板时，该值永远不会重置为默认值

要解决此问题，您可以将
context.strokeStyle='black'
放在
drawBoard
方法的开头，或者使用
save
和
restore
在再次绘制电路板时保留状态。
在绘制内容和更改填充/笔划样式时，应使用context.save/restore方法。我从未听说过，我将对此进行研究，谢谢
strokeStyle
可以用作边框颜色。谢谢，这解决了边界问题。你知道为什么要在最后一个棋盘格上画边框吗？@Racheldocketr，是的-那是因为当最后一个棋盘格被绘制时，你初始化了一个
beginPath
，当你在
highlightTile
方法中调用
stroke
时，最后一个棋盘格将包括在内。要解决此问题，请将
context.beginPath（）
放在
drawBoard（）
之后，放在您的
highlightTile
方法中。谢谢，这修复了边框，但我仍然不知道为什么要为检查器创建边框。我将使用保存和恢复方法，这样我就不会再遇到类似的问题