我正在为 html/js 开发 2d 世界编辑器，并试图找到将芯片组(如下所示)拆分为多个小方 block (芯片)的最佳方法。
目前，我正在使用一种类似于默认的 css Sprite 表方法的方法，即使用背景位置来移动许多小的背景 <div>元素，直到每个元素显示筹码组的一个方格/筹码。
它工作正常，没有大的性能问题，但它似乎是一种整体笨拙的方法。
我想到的其他方法是将芯片组切成许多临时图像并制作一个 <image>每个元素，或使用 <canvas>而不是 <div>'s或 <image>'s
无论如何，我正在寻找有关该主题的建议:
在 JS 中拆分 Sprite Sheets/Chip Sets 的高性能方法是什么？
芯片组示例
最佳答案
您现在执行此操作的方式应该非常快。您基本上可以通过仅存储一个图像然后使用 drawImage 在 Canvas 级别重新实现它。只从中绘制部分。据我所知，这是最常见的方式，而且速度非常快。至少那是我写 game engine using canvas. 时的经历
使用 Canvas 很可能更快，内存效率更高，因为您没有额外的 DOM 开销，但您必须针对您的特定用例对其进行测量并进行验证。
如您所建议的，创建一堆单独的图像会非常慢，因为它需要复制图像的一部分并为每个图像创建一个额外的 DOM 元素。
简而言之:使用 Canvas 总是会更快(对于类似的实现)，因为您几乎是直接与 GPU 交互。从一张图像中绘制而不是将其复制到多个子图像中总是会更快，因为你不会有重复的内存，只要你从同一张纸上绘制，GPU 就不必切换纹理.
关于javascript - 在 JS 中拆分 Sprite Sheets/Chip Sets 的高性能方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44768360/