简体繁体 English

Html Canvas智能绘图

[英]Html Canvas Intelligent Drawing

原文 2010-03-06 01:06:58 8 2 javascript/ html/ canvas

I'm currently implementing a HTML canvas based webapp that features panning. 我目前正在实现一个基于HTML画布的webapp，它具有平移功能。 Is there a way to use an auxiliary buffer to hold the presently visible area so when I pan I don't have to redraw the whole canvas and only have to draw the newly visible areas? 有没有办法使用辅助缓冲区来保持当前可见的区域，所以当我平移时，我不需要重绘整个画布，只需绘制新的可见区域？

2 个解决方案

See my previous response to a related question: What is the fastest way to move a rectangular (pixel) region inside a HTML5 canvas element 请参阅我之前对相关问题的回答：在HTML5画布元素中移动矩形（像素）区域的最快方法是什么

Just draw the entire canvas in a div that has overflow:hidden and implement panning as re-positioning the top and left of the canvas within that div. 只需在具有溢出的div中绘制整个画布：隐藏并实现平移，将画布的顶部和左侧重新定位在该div中。 It is much faster. 它要快得多。 And don't worry about drawing canvases tens of thousands of pixels wide/tall, I've successfully used this on very-very large and complex HTML and SVG elements. 并且不用担心绘制数万像素宽/高的画布，我已成功地在非常大且复杂的HTML和SVG元素上使用它。