2D-просмотр прокрутки камеры в html5

Ответ 1

Итак, вы хотите, чтобы холст размером 500x500 отображал что-то (уровень игры), который действительно составляет 9000x500 или около того.

Это нормально. То, что вы делаете, - это представление о холсте как "видовой области" для более крупной сцены. Вы переводите холст (или все остальное) в соответствующее место и рисуете все соответствующие вещи в этом месте.

Вот пример:

http://jsfiddle.net/hKrrY/

Нажмите на холст и удерживайте клавишу со стрелкой влево, чтобы увидеть сцену, пока точка красного игрока остается "неподвижной".

Когда вы прокручиваете холст 100x100, вы видите объекты, которые рисуются в однократных окнах, например (330,50). Перевод холста приводит их в поле зрения.

Я предполагаю, что стоит упомянуть, что именно здесь делается действительно важна оптимизация в холсте. Пример, который я привел выше, является очень упрощенным способом создания видового экрана, и по мере продвижения вашего кода вы захотите больше думать о том, что вы рисуете, и сколько вы рисуете. Например, вы захотите не рисовать объекты, которые полностью вне экрана, и если ваша игра или приложение имеют фон, который составляет 9000x500, вы, вероятно, не хотите каждый раз рисовать всю вещь!

Итак, концепция - это вынос здесь, но вам будет очень интересно думать о том, как вы его реализуете, и о том, какую работу вы делаете на холсте. Если у вас возникли проблемы с производительностью в приложении с боковой прокруткой, обязательно сообщите нам:)

Ответ 2

Я всегда считаю более эффективным обернуть ваш холст в div с шириной и высотой вашего окна просмотра, а переполнение - скрытым, а затем просто нарисовать весь холст и прокрутить div до того места, где вы хотите посмотреть,

Итак, html будет:

<div id='wrapper' style='width: 200px; height: 200px; overflow: hidden;'>
     <canvas width='1000' height='1000'></canvas>
</div>

и javascript будет что-то вроде

function scrollWrapper(x, y){
    var wrapper = document.getElementById('wrapper');  
    wrapper.scrollTop = x;
    wrapper.scrollLeft = y;
}

Затем просто вызовите функцию с x и y, которые вы хотите просмотреть. вы можете обернуть его в setTimeout или что-то в этом случае, если вы хотите переехать туда, а не просто прыгать туда.