Я хочу сделать видовое окно для холста.

Question

Итак, у меня есть игра (это скорее карта), которая загружает кучу плиток и помещает их вместе. Плитка загружается просто отлично, но я бы хотел переместить область просмотра. Я изучил эту тему, и у меня есть функция, которая проверяет клавиатуру. Если нажать «d», я бы хотел переместить холст, чтобы видовое окно увидело что-то другое.

До сих пор функция для перемещения холста вправо выглядит следующим образом:

function moveRight() { 
ctx.translate(3000, 0); 
imageSearch(); 
}; 

Если функция imageSearch обновляет холст. Обновление, загрузка и т. Д. Отлично работает, я просто не могу понять, как перемещать холст. Помощь будет оценена, спасибо заранее.

EDIT:

Вот JSFiddle что 1j01 фиксированной для меня: jsfiddle.net/jujhp0yv/1

Полотно по-прежнему не двигается, хотя, так что я по-прежнему ждем ваших ответов :)

Answer 1

Попробуйте сохранить порт вида в переменной.

var view = {x: 0, y: 0}; 

Затем, в начале вашего цикла вытяжки/визуализации функции, сохранить состояние холста и перевести на вьюпорте.

ctx.save(); 
ctx.translate(view.x, view.y); 

Если вы хотите view.x и view.y представлять центр зрения, вместо того, чтобы перевести так:

ctx.translate(view.x - canvas.width/2, view.y - canvas.height/2); 

В конце вашего цикла дро/функцию визуализации, восстановить состояние так выиграл переводы Не складывайся.

ctx.restore(); 

Теперь вы должны быть в состоянии изменить view.x и view.y, чтобы переместить вид. (например, view.x += 5)