任何Javascript库都可以按需创建和渲染本地图像？

我正在构建一个浏览器游戏。这是一款基于瓷砖的游戏（如果你熟悉的话，很像神奇宝贝）。大约9年前我用C++构建了一个类似的游戏。我仍然拥有我使用的所有图像和音乐。我想用Javascript（可能还有html5）重建这个游戏，这样人们就可以在线玩了

我遇到的问题是一些地图太大（~300000px*300000px），无法作为图像加载。我在谷歌上搜索了“按需加载”，确实找到了一些可以进行“延迟加载”的库，但还有另一个问题：大约有3000张地图。一个玩整场游戏的玩家最终会缓存50 gig的图像. 更不用说服务器网络上的压力了

因为游戏是基于平铺的，通常（~300000px*300000px）地图只使用大约100个不同的地图组件（<2MB），所以我的方法是将地图使用的所有组件放在一个图像中，并与平铺地图一起使用，如下所示：

来自map1.png的平铺（0，0），宽200，高200，偏移量_x 450，偏移量_y 600

来自map1.png的平铺（0，1），宽100，高100，偏移量×650，偏移量×y 500

因此，客户机不需要下载整个地图作为图像，只需要下载2MB图像文件和500KB磁贴地图。可以在本地生成真实地图，并根据需要进行渲染：

播放平铺（100100），渲染矩形（7070130130）

我的问题是： 是否有任何库可以按需创建和渲染图像？ 是否有任何现有的示例或教程？ CSS精灵在这里可以做什么？ 我还能找到其他关键字和链接吗

---

谢谢

您可以使用纯javascript创建图像，而无需使用canvas创建任何库。 但我不明白为什么你的IMG是200万，当他们是200*200。。。 一个精灵可能会有所帮助，但对于大于3000像素的精灵，存在一些问题，所以请记住这一点。sprite只会将每个图像的大小减少几个字节，如果你的IMG那么大，那将是你最大的问题

---

我的方法是按需加载图像，并使用100个单个图像。因此，通信量减少到用户的特定需要。当玩家移动且您已完成时，切换每个磁贴的来源。

您要求提供一些示例。我不久前在网上找到了这个

---

这是一个很好的例子，说明了您所谈论的内容。

您可以使用html和css将图像覆盖到其他图像上。看看绝对定位和z索引属性。网上有很多这样做的例子。这个库可以动态创建图像。