dynamic - HTML5 大 Canvas

Question

我注意到，当动态创建一个大 Canvas (6400x6400) 时，很多时候不会在上面绘制任何东西，而当将 Canvas 设置为较小尺寸时，它在 100% 的时间内都有效，但是正如我不知道更好，我别无选择，只能尝试让大 Canvas 正常工作。


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

//getContext 然后在这里绘制东西...

Canvas 的目的是简单地在两个节点(图像)之间画一条线，这两个节点位于一个可以四处拖动的 div 容器中(我认为人们称之为视口(viewport))。

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

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

Answer 1

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

另一种可能性是尝试将 Canvas 分成大块，并且只渲染屏幕上实际可见的那些 block 。谷歌地图对图像执行此操作，仅加载当前可见的 map 部分的图像(在屏幕的每一侧加上一些额外的图像以确保当您滚动时您不需要等待它呈现) ，保持一种错觉，即有一个巨大的 Canvas ，而实际上只渲染比窗口大一点的东西。