Dynamic HTML5大画布

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

thisObj.oMapCanvas=jQuery（document.createElement（'canvas'））.attr（'width'，6400.）.attr（'height'，6400.）.css（'border'，'1px纯绿色'）.prependTo（thisObj.oMapLayer）.get（0）

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

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

---

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

大多数实现HTML5的浏览器仍处于早期测试阶段，因此很可能他们仍在解决bug

---

但是，您尝试创建的画布的分辨率非常高。。比大多数人的显示器所能显示的还要高。你为什么需要这么大的尺寸？为什么不将可拖动区域限制为更符合典型显示分辨率的区域？

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

---

另一种可能是尝试将画布分割成大的平铺，只渲染那些在屏幕上实际可见的平铺。Google Maps使用图像来实现这一点，只加载当前可见的地图部分的图像（加上屏幕两侧的一些额外图像，以确保在滚动时不需要等待它渲染），保持一种巨大画布的错觉，而实际上只渲染比窗口大一点的东西。

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

它在一个有溢出：隐藏的div内，在javascript内，你可以按住并拖动该div的内容（基本上设置顶部和左侧属性）因此，您可以在该视口中查看它的一部分。它用于渲染随机生成的地图，大小为100x100，每个单元格为64x64（想象一个星图，其中星星通过星线连接），我尝试使用的另一种方法是为所需的每个链接（线）创建画布，我只是认为，由于更多的插入到dom中，速度会慢很多。最初我使用的是javascript绘图库wz_jsgraphics，但是由于线条呈现的本质，这使得滚动速度非常慢。我也从未意识到这样做的内存需求，这确实使它变得不可行。我将不得不研究如何使用SVG动态地实现这一点，谢谢！

// getContext and then drawing stuff here...