覆盖画布对象，一起模糊？

Question

我是一名新手画布程序员，只是想到六边形网格是一种“游戏板”。

我拿了一些我在网上找到的代码，并添加到其中一种提供“突出显示”功能的方法中。在drawHex函数中，strokeStyle将变为霓虹蓝色，并在电路板顶部绘制一个霓虹蓝色十六进制（表示六边形是“突出显示”）。然后，如果您单击相同的十六进制，它将在其上重绘一个黑色六边形，以“擦除”突出显示。但是，如果你在这个jsfiddle中查看它：http://jsfiddle.net/DHW7f/你会看到突出显示一个六边形然后再次点击它，会导致一些霓虹蓝色留在六边形的模糊边缘。

正如我所说，我对画布的想法完全陌生......有没有更好的方法来“突出”这样的对象？如果没有，有没有办法解决这种模糊？我试着让霓虹蓝六角线宽更小，但似乎没有效果。

这是高亮度六边形中涉及的特定代码：

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

Answer 1

请记住，在<canvas>元素上，内容会被绘制出来并且不会被记住：它只是被绘制出来的。现在，你在六边形上绘制六边形。这是突出显示和取消突出显示形状的一种非常有效的方法，但是如果你真的想摆脱模糊，你需要改变程序的整体风格：

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

我知道我提出的解决方案相当抽象，可能需要花费大量工作才能进行整合，并且由于您在每次点击时重新绘制所有内容，因此整体效率会降低，但不幸的是，＃39 ; <canvas>元素会发生什么，而这些元素无法改变以前绘制的形状。