tyl*_*zie 10 javascript html5 canvas
我最近开始学习使用HTML5 Canvas,我真的有很多问题.一切都与表现有关.我明白,所有这一切对我正在做的事情都是非常主观的.但我只是希望获得一些清晰度.
在用玩家的鸟瞰图创建游戏的例子中.所有2d都有一个在X轴和Y轴上滚动的地图.
问题1:据我所知,只要我的地图画布中没有移动物体.做一些像我创建一个大画布元素然后使用JS滚动页面/移动画布更有效率.而不是创建一个与我的屏幕大小相同的画布,翻译画布并重新绘制每个动作的地图.
问题2:如果我使用上面的方法来设置一个大型画布来滚动我的地图.画布上的简单绘图和复杂的绘图之间会有很大的性能差异吗？示例:简单画布,其中包含几行单色块,而复杂画布则包含数千个线条,圆形,渐变,图案和细节.如果这两个画布的宽度和高度相同,那么只要让浏览器滚动它们就不会有巨大的性能差异吗？(没有重绘).
问题3:是否有一种处理比画布对象大的地图的首选方法？我知道各种浏览器会限制画布的物理尺寸.在几个大的画布块中设计地图是否更好？当玩家靠近边缘时,将相邻的块加载到全新的画布元素中.或者这会导致问题.如果我正在使用像10,000px到10,000px的画布元素并且我开始并排放置其中的几个,我只是在寻找麻烦？我最好将其设计为在单个画布中运行,只需在播放器移动时重绘地图并保持地图的复杂性.并对其进行编程,使其不会考虑地图中与播放器不相近的部分.
我已经阅读了一些关于增加性能的技巧,比如分层画布而不是重新绘制画布而不是浏览器刷新.但是我一直在寻找有关处理大型地图的良好实践信息以及绕着它们移动的表现.
我真的很想听听大家的想法.
问题1实际上不是一个问题,但最好创建一个与屏幕大小相同的画布,翻译画布并使用每个动作重绘地图的PART.不要重绘整个地图,而是添加方法来重绘比视口稍大的地图的一部分,可能会排除已绘制的地图的一部分.否则您的浏览器可能会因内存压力而崩溃
问题2:对.完全没有区别.浏览器只需在视口后面移动已绘制的画布.
问题3:在谷歌地图上使用Chrome的元素检查器.这是一个在小巧的手机上运行的巨大地图的一个很好的例子.您将看到它使用图像网格(您可以使用画布).如果用户返回,您可以在视口外缓存这些块.使用缓存大小来保持内存使用的合理性.