HTML5 Canvas масштабирование/масштабирование окна просмотра большего 2D-мира?

Question

Я пытаюсь научиться использовать холст, чтобы экспериментировать с созданием веб-приложений и веб-игр в свободное время. Мне нравится, что вы можете нарисовать объекты на странице. Во всяком случае, я хотел бы знать, как я мог бы сделать холст довольно большой, а затем увеличить в определенную точку, а затем динамически перемещать этот viewbox с проигрывателем. Я также хотел бы знать, как реализовать увеличение и уменьшение масштаба.

Довольно много, что я пытаюсь сказать, как я могу создать «мир» 2D-как на http://www.agar.io/

Проблема у меня, кажется, есть то, что я могу создать холст, чтобы взяться за всю страницу, но как мне настроить его, чтобы на холсте показывалась часть другого гораздо большего мира? И может динамически перемещаться, как видоискатель в этом более крупном мире.

Я пробовал поиск по Google, но при поиске масштабирования большинство вещей связано с масштабированием холста для других устройств и их разрешений.

На данный момент я собираюсь использовать холст HTML5, JS & jQuery, чтобы поэкспериментировать с холстом, есть ли другие вещи, которые я должен знать?

Благодарим за помощь.

Answer 1

«Камера» для любого приложения - это просто контекст рисования. Скажем, у вас есть свой:

canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d"); 

вы можете перемещать точку зрения, используя метод translate().

Вот JSFiddle объяснить движение камеры: https://jsfiddle.net/0o2nsc18/

Чтобы переместить камеру в скрипке, щелкните в окне вывода и использовать клавиши со стрелками для перемещения камеры.

Answer 2

Что касается прокручиваемого фона, посмотрите на это tutorial, это даст вам представление о том, как можно использовать прокрутку. Вы можете изменить это так, как хотите, например, когда игрок подталкивает фон, он будет перемещаться вверх по ходу движения.

Для масштабирования, я считаю, что вы ищете команду масштабирования.

var canvas = document.querySelector('canvas'); 
var ctx = canvas.getContext('2d'); 
ctx.fillStyle = 'blue'; 
ctx.fillRect(0, 0, 100, 100); 
ctx.scale(x,y); 

Вы можете масштабировать изображение напрямую, а не холст, делая это. Фрагмент кода будет масштабировать ширину и высоту изображения с помощью x. Посмотрите на это post.

var w = value; 
var h = value; 
var x = scale; 
ctx.drawImage(img, 0, 0, w/x, h/x); 

Посмотрите here для некоторых вещей на масштабирование, поворот и другие вещи, которые могут оказаться полезными для создания игры.