javascript - 覆盖 Canvas 对象，模糊在一起？

Question

我是一名新手 Canvas 程序员，只是在尝试将六边形网格作为某种“游戏板”的想法。

我使用了一些在网上找到的代码，并将其添加到其中一个方法中以提供“突出显示”功能。在drawHex函数中，笔划样式将更改为霓虹蓝色，并在棋盘顶部绘制一个霓虹蓝色六边形(表示该六边形已“突出显示”)。然后，如果您单击同一个六边形，它将在其顶部重新绘制一个黑色六边形，以“删除”突出显示。但是，如果您在这个 jsfiddle 中查看它:http://jsfiddle.net/DHW7f/您会发现突出显示六边形然后再次单击它，会导致一些霓虹蓝色保留在六边形的模糊边缘中。

正如我所说，我对 Canvas 的想法完全陌生......有没有更好的方法来“突出显示”这样的对象？如果没有，有没有办法解决这个模糊问题？我尝试将霓虹蓝六边形线宽变小，但似乎没有效果。

这是突出显示的六边形中涉及的特定代码:

HexagonGrid.prototype.drawHex = function(x0, y0, fillColor, debugText, highlight, revert)     {
if (highlight == true && revert == false){
    this.context.strokeStyle = "#00F2FF";
}

Answer 1

请记住，在 <canvas> 元素上，内容会被绘制，但不会被记住:它只是被绘制。现在，您正在六边形之上绘制六边形。这是突出显示和取消突出显示形状的非常有效的方法，但如果您确实想消除模糊，则需要更改程序的整体样式:

• 创建一个 Hexagon 构造函数，然后将 HexagonGrid 创建为 Hexagon s 的一种“系统”。将 Hexagon 存储在 hexes[] 属性中。
• 不要在函数中使用尽可能多的参数。将位置或笔画等更多内容保存为属性，以便它们更加稳定。这弥补了 Canvas 上绘制的尚未保存的形状。
• 将.drawHex()方法转移到Hexagon原型(prototype)，然后找到一个新系统，使用新系统在Hexagon中查找HexagonGrid.prototype.clickEvent()。我不建议使用 Hexagon.prototype.isMouseOn() 方法并循环 hexes[] 属性，因为那样效率很低。您应该执行与当前方法类似的操作，其中单击的十六进制是根据鼠标位置计算的。
• 在 HexagonGrid.prototype.clickEvent() 中找到正确的十六进制后，更改 Hexagon 的描边属性和旧选定的 Hexagon 的描边属性，然后重新绘制整个网格。与您现在所做的相比，这是低效的，但这是覆盖所有内容的唯一方法。重新绘制网格时，请确保通过在所有内容上绘制白色背景来“清除 Canvas ”。

我知道我提出的解决方案相当抽象，可能需要大量工作来集成，而且总体效率会较低，因为每次点击都会重绘所有内容，但不幸的是，这就是 <canvas> 发生的情况无法改变先前绘制的形状的元素。