【问题标题】:Improving HTML5 canvas image loading改进 HTML5 画布图像加载
【发布时间】:2011-10-04 06:19:48
【问题描述】:

所以我正在创建一个游戏并决定为地图使用画布。该地图是 500kb+ (6400x6400px) 的大图片,画布大小为 320x320,因此我一次只显示部分图像,并在单击按钮时重新加载页面。

首先我想问的是,当画布只更改显示部分而不更改图像时,如何阻止画布在每次页面刷新时重新加载图像?其次,我怎样才能使加载更快/更有效?我可以让它只加载图像的显示部分吗?欢迎任何性能提示,我可以根据需要以任何方式操作图像。

【问题讨论】:

  • 您是否在drawImage 中指定宽度和高度参数?例如:ctx.drawImage('foo.png', 0, 0, 320, 320) 这应该有助于提高性能。
  • 是的,cxt.drawImage(img,0,0,320,320,0,0,320,320);

标签: javascript performance html canvas load


【解决方案1】:
  1. 为什么要重新加载页面?你可以重绘地图。
  2. 您可以像 Google 地图或任何其他现代制图服务一样按需将大图像切割成碎片、加载和绘制。

【讨论】:

  • 1.因为我需要显示数据库更新。 2. 这是一种选择,但我想知道还有其他方法。
  • 好的,这是一个答案的开始......以目前的形式,它只给@Clueless 一点线索。您能否再采取一两步并举一个例子或指出一些示例代码来说明如何执行您的建议?
  • 您可以使用 AJAX 加载它们而无需重新加载页面。
  • 而且没有办法简单地停止用 js 重新加载图像(我的技能很烂)?而且我更喜欢页面重新加载而不是使用 ajax。我正在寻求帮助而不是我的做事方法受到质疑:(。
猜你喜欢
  • 2015-08-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-11-28
  • 2012-03-20
  • 1970-01-01
  • 2014-08-15
相关资源
最近更新 更多