Создать кнопки JavaScript, которые увеличивают переменную, чтобы пользователь мог эффективно масштабировать страницу

Question

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

var canvasWidth = 600;

Желаемое приращение будет в наборах по 200, поэтому, когда пользователь нажимает кнопку увеличения масштаба один раз, значение равно 800 и страница перерисовывается, дважды до 1000 и т. Д.

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

Имеет ли это смысл?

Answer 1

Тривиальный ответ:

<button onclick="canvasWidth=(canvasWidth||0) + 200; resize();"...>Increase scale</button>
<button onclick="canvasWidth=(canvasWidth||0) - 200; resize();"...>Decrease scale</button>
<button onclick="canvasWidth=600; resize();"...>Reset scale</button>

Я не знаю, пытаетесь ли вы масштабировать элемент canvas или его содержимое.

Answer 2

Насколько я знаю,

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

Ура !!