Ste*_*eve 4 html5 canvas dynamic
我注意到,当动态创建一个大画布(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...
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...
Run Code Online (Sandbox Code Playgroud)
画布的目的是简单地在两个节点(图像)之间绘制一条线,这两个节点位于可以拖动的div容器内(视口我认为人们称之为它们).
我"想"可能发生的是,在画布上调整大小会占用画布,这就干扰了上下文绘制,就像我之前说的那样,当画布很小时它会一直有效.
有没有人经历过这个和/或知道任何可能的解决方案？
这是一个巨大的画布.6400 x 6400 x 4字节每像素为156 MB,您的实现可能需要分配两个或更多该大小的缓冲区,用于双缓冲,或者还需要分配该大小的视频内存.分配和清除所有内存需要一段时间,而且您可能无法保证在这样的分配中取得成功.你需要这么大的画布吗？您可以尝试调整画布的大小,使其尽可能大,以便在这两个div之间绘制线条,或者您可以尝试使用SVG而不是画布.
另一种可能性是尝试将画布分成大的图块,并仅渲染在屏幕上实际可见的图块.谷歌地图使用图像执行此操作,仅加载当前可见的地图部分的图像(加上屏幕两侧的一些额外的图像,以确保滚动时不需要等待它渲染) ,保持一种错觉,即有一个巨大的画布,而真正只是渲染比窗口更大的东西.