HTML5 大画布答案

【问题标题】：HTML5 Large canvasHTML5 大画布
【发布时间】：2009-12-26 16:44:49
【问题描述】：

我注意到，当动态创建一个大画布 (6400x6400) 时，很多时候什么都不会在上面绘制，而当将画布设置为小尺寸时，它 100% 的时间都可以工作，但是当我不知道更好，我别无选择，只能尝试让大画布正常工作。

thisObj.oMapCanvas = jQuery( document.createElement('canvas') ).attr('width', 6400).attr('height', 6400).css('border','1px solid green').prependTo( thisObj.oMapLayer ).get(0);

// getContext and then drawing stuff here...

画布的目的是在两个节点（图像）之间简单地画一条线，它们位于一个可以拖动的 div 容器中（我认为人们称之为视口）。

我“认为”可能发生的情况是，在画布上调整大小会清空画布，这会干扰上下文绘制，就像我之前所说的那样，当画布小很多时它一直有效。

以前有没有人经历过这种情况和/或知道任何可能的解决方案？

【问题讨论】：

标签： dynamic html canvas

【解决方案1】：

那是一块巨大的画布。每个像素 6400 x 6400 x 4 字节为 156 MB，您的实现可能需要分配两个或多个该大小的缓冲区，用于双缓冲，或者还需要分配该大小的视频内存。分配和清除所有内存需要一段时间，并且您可能无法保证在这样的分配中成功。你有理由需要这么大的画布吗？您可以尝试将您的画布调整为仅在这两个 div 之间绘制线所需的大小，或者您可以尝试使用 SVG 而不是画布。

另一种可能性是尝试将画布分成大块，并仅渲染那些在屏幕上实际可见的块。 Google Maps 使用图像执行此操作，仅加载当前可见的地图部分的图像（在屏幕的每一侧加上一些额外的图像，以确保滚动时无需等待它呈现） , 保持有一个巨大的画布的错觉，而实际上只渲染了比窗口大一点的东西。

【讨论】：

它用于渲染一个随机生成的地图，其大小为 100x100，每个单元格为 64x64（想想星星通过星道连接的星图），我很想采用的另一种方法是创建每个链接（行）需要一个画布，我只是认为由于对 dom 的插入更多，它会慢很多。最初我使用了 javascript 绘图库 wz_jsgraphics，但是由于渲染线条的性质，这使得滚动非常慢。
我也从未意识到这样做的内存要求，这确实使它不可行。我将不得不考虑使用 SVG 动态执行此操作，谢谢！

【解决方案2】：

大多数实现 HTML5 的浏览器仍处于早期测试阶段 - 因此它们很可能仍在解决错误。

但是，您尝试创建的画布的分辨率非常高......远高于大多数人的显示器甚至可以显示的分辨率。你有理由需要它这么大吗？为什么不将可拖动区域限制在更符合典型显示分辨率的范围内？

【讨论】：

它位于具有溢出：隐藏的 div 内部，在 javascript 中，您可以按住并拖动该 div 的内容（基本上设置 top 和 left 属性），以便您可以在其中查看部分内容那个视口。

【解决方案3】：

我遇到了同样的问题！我正在尝试使用大画布连接一些 div。最终我放弃了，用 javascript 画了一条线（我用小图像作为像素画了线——我先用 div 画了线，但在 IE 中，div 太大了）。

【讨论】：