"googlemaps" перетаскивая с помощью html5 canvas

Question

У меня большой холст html5 (намного больше экрана), и я хочу реализовать перетаскивание "google-maps". Я хочу, чтобы холст можно было перетаскивать мышью, и я хочу, чтобы он отображал только ту часть, которую мы видим на экране при каждом его перетаскивании. У кого-нибудь есть хорошая идея?

Answer 1

Я решил эту проблему с помощью перетаскиваемого компонента jQuery UI в элементе canvas.Я заключил его в div - с переполнением, установленным на hidden, и сделал canvas настолько большим, насколько мне нужно.Работает брелок

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

Answer 2

Чтобы визуализировать ваш холст только на той части экрана, которую мы видим, вы можете использовать функцию drawImage: drawImage (image, x, y, width, height)

С «изображением» в качестве оригиналавесь холст, "x" и "y" представляют смещение, которое перемещается при перетаскивании, и "width / height" размер фактических окон.

См. документацию: 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