“googlemaps”拖动html5画布

Question

我有一个大的HTML5画布（比屏幕大得多），我想实施一个“谷歌地图”拖动。 我希望画布可以通过鼠标拖动，并且我希望它只渲染每次拖动时我们可以在屏幕上看到的部分。 有人有一个好主意吗？

Answer 1

我通过在canvas元素上使用jQuery UI可拖动组件来解决此问题。 我把它放在一个div中 - 溢出设置为隐藏，并使画布尽可能大，因为我需要它。作品魅力

http://jqueryui.com/demos/draggable/

Answer 2

为了使你的画布仅在屏幕的部分，我们可以看到，你可以使用drawImage方法： 的drawImage（图像，X，Y，宽，高）

将“图像”作为原始整个画布，“x”和“y”表示拖动时移动的偏移量，“宽度/高度”表示实际窗口的大小。

查看文档： http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage

和MDC一个伟大的教程： https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images