「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