Question

我有一个棋盘。当用户将鼠标悬停在图块上时，它将以黄色突出显示。发生这种情况时，游戏边框也将变为黄色，以及最后的白色棋盘格边框。

我什至没有将棋子设置为有边框，所以我不知道为什么会这样。

我这样画边框：

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();

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

以下是实时版本：http://jsfiddle.net/xupkmc60/2/

边界为78-82行 Checker是第111-114行

Answer 1

此处有两种不同类型的上下文样式：fillStyle和strokeStyle。您在strokeStyle中将yellow设置为highlightTile，但不要取消设置。我相信，如果您将strokeStyle重置为drawBoard的一部分，那么您应该会很好。

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

Answer 2

当用户将鼠标悬停在图块上

您在strokeStyle侦听器中将event设置为黄色。再次绘制电路板时，永远不会重置为默认值。

要解决此问题，您可以在context.strokeStyle = 'black'方法的开头放置drawBoard，或者在绘制木板save和restore来保留状态再次。

画布填充样式随机变化

2 个答案: