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

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

javascript canvas

Javascript 覆盖画布对象，一起模糊？,javascript,canvas,Javascript,Canvas,我是一个新手画布程序员，只是在玩弄六边形网格是某种“游戏板”的想法我在网上找到了一些代码，并添加到其中一个方法中，以提供“突出显示”功能。在drawHex函数中，strokeStyle将变为霓虹蓝颜色，并在板的顶部绘制一个霓虹蓝六边形（表示六边形“高亮显示”）。然后，如果单击同一个六边形，它将在其顶部重新绘制一个黑色六边形，以便“擦除”突出显示。但是，如果您在这个jsfiddle中查看它：您将看到高亮显示一个六边形，然后再次单击它，会在六边形模糊的边缘留下一些霓虹蓝色正如我所说的，我对画布的

我是一个新手画布程序员，只是在玩弄六边形网格是某种“游戏板”的想法

我在网上找到了一些代码，并添加到其中一个方法中，以提供“突出显示”功能。在drawHex函数中，strokeStyle将变为霓虹蓝颜色，并在板的顶部绘制一个霓虹蓝六边形（表示六边形“高亮显示”）。然后，如果单击同一个六边形，它将在其顶部重新绘制一个黑色六边形，以便“擦除”突出显示。但是，如果您在这个jsfiddle中查看它：您将看到高亮显示一个六边形，然后再次单击它，会在六边形模糊的边缘留下一些霓虹蓝色

正如我所说的，我对画布的概念是完全陌生的。。。有没有更好的方法“突出”这样的对象？如果没有，有没有办法修复此模糊？我试着缩小霓虹灯蓝色六边形的线宽，但似乎没有效果

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

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

记住，在

元素上，东西被画出来，但它不被记住：它只是画出来的。现在，您正在六边形的顶部绘制六边形。这是一种非常有效的高亮显示和取消高亮显示形状的方法，但如果您确实想消除模糊，则需要更改程序的整个样式：

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

我知道我提出的解决方案相当抽象，可能需要大量的工作来集成，而且总体效率较低，因为每次单击都会重新绘制所有内容，但不幸的是，

元素无法更改以前绘制的形状

很多有用的评论。我会注意到，我试图使用一个名为“oCanvas”的javascript库来做同样的实验。我相信它有自己的跟踪方法，基本上把每个形状都变成一个“对象”，你可以通过名称来操纵它。但它似乎效率很高。正如您在这里看到的：当您单击时，做任何事情都需要相当长的时间。我认为它在与太多的物体搏斗。我如何才能从本质上避免遇到同样的问题？通过将形状绑定到事件并调用如此多的函数，该库看起来非常复杂。该库可能会做很多工作，但您可能不需要在自己的程序中做这么多工作。你应该遇到的唯一低效是最后一步，但即使是最后一步也不应该落后。除此之外，您不需要调用更多函数，也不需要实例化所有

Hexagon

对象。尽量避免调用使用该库所需的尽可能多的函数，我认为您应该很好。