Html5的canvas:HTML5大型画布(very large canvas)

我注意到,当动态创建一个大画布(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 容器内(我认为人们称之为视口)。

我“认为”可能发生的是,在画布上调整它清空画布,并且干扰上下文绘制,就像我之前说的那样,当画布更小的时候,它一直在工作。

有没有人经历过这个和 / 或知道任何可能的解决方案?

8

那是一个巨大的画布。每像素 6400 x 6400 x 4 字节为 156 MB,您的实现可能需要分配两个或多个该大小的缓冲区,以进行双缓冲,或者还需要分配该大小的视频内存。分配和清除所有内存将需要一段时间,并且可能无法保证在这样的分配上取得成功。是否有理由需要如此巨大的画布,而不是使用两个 SVcanvas 来调整大小

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

0

大多数实现 HTML5 的浏览器仍处于早期测试阶段-所以他们很可能仍在解决问题。

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

0

我也有同样的问题!我正在使用一个大画布来连接一些 div。最终我放弃了,并使用 javascript 画了一条线(我使用小图像作为像素绘制了我的线-我首先使用 div,但在 IE 中 div 太大了)。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(566)
Bird ge:动态生成 Ge'ezunicode
上一篇
Cscd核心期刊发表:如何在 HAML中发表评论(haml)
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(74条)