Блог

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

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

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

Чтобы отобразить ваш холст только на той части экрана, которую мы можем видеть, вы могли бы использовать функцию 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