帆布瓷砖网格与悬停效果，瓷砖等

Question

我一直在为画布构建基于图块的显示网格。这是我到目前为止：http://jsfiddle.net/dDmTf/7/

我遇到的一些问题，并不能完全掌握：

1. 初始加载时间很荒谬......我不明白我做错了什么 - 修复后，发现我的渲染时间超过了我应该
2. 悬停效果“应该”突出显示图块的边框，将其删除，我无法在不重新渲染整个画布的情况下恢复上一个图块。
3. 我如何使用瓷砖表，为我提供单个图像而不是一堆小图像
4. 调整窗口大小（调整画布大小）也会擦除画布。我需要重新渲染吗？或者我可以在更改宽度/高度时保持各种状态 - 添加onresize回调，重新渲染地图。可能不是最好的方式吗？
5. 多层？我将如何允许透明的.png文件覆盖彼此

这些是我现在坚持的主要问题，任何指导都会受到重视。

此外，如果你有我的JavaScript的任何指针，请随意！我正在学习它，因为我走了，我确信我做了很多错事。

修改

作为一个FYI，我只是复制粘贴当前在jsfiddle上显示的精灵地图。它不是我计划使用的那个，但它比上传一个更容易。我计划维护一个32x32网格而不是（似乎是）该瓷砖表中的16x16网格

修改

我现在有一个32x32的瓷砖显示在那里，但悬停效果仍在打破它，我不知道如何“知道”旧值是什么。

Answer 1

问题是你没有在'mouseout'之后重新绘制瓷砖。 你需要在移出它之后重新绘制单个图块，但是这会变得棘手，因为事情变得更复杂或更好但是在鼠标移动时会执行以下操作。

• 清除画布
• 绘制网格
• 画你的瓷砖
• 然后突出显示/清除该单元格。

如果您最终拥有任何类型的动画，那么无论如何都会使用这个过程，否则当某个东西从一个磁贴移动到另一个磁贴时，它会留下重影。