Задать ширину и высоту холста (canvas) на странице

Question

Имеется графический редактор на JavaScript, написанный с помощью canvas.

Размеры задаются в html файле, с помощью команды

<canvas id='canvas' width="600" height="600"></canvas>

Как задать ширину и размер холста непосредственно с помощью формы в браузере, чтобы пользователю не приходилось каждый раз менять код программы? Заранее благодарен.

Answer 1

Вам соответственно необходимо добавить 2 поля ввода ширины и высоты.
Далее либо отслеживать ввод данных и менять в соответствии значения ширины и высоты элемента canvas.
Для видимости в тесте проставил начальные значения 100-100.

    var can = document.getElementById('canvas'); // Ищем элемент по id

    width1.oninput = function () { // Отслеживаем ввод данных в поле (можно заменить на нажатие кнопки)
        var w = document.getElementById('width1').value; // Получаем введённое значение
        can.setAttribute('width', w); // Меняем ширину canvas элемента
    };
    height1.oninput = function () { // Отслеживаем ввод данных в поле (можно заменить на нажатие кнопки)
        var h = document.getElementById('height1').value; // Получаем введённое значение
        can.setAttribute('height', h); // Меняем ширину canvas элемента
    }

<canvas id='canvas' width="100" height="100"></canvas>
<input id="width1" type="number">
<input id="height1" type="number">

Или добавить кнопку и менять размер при нажатии кнопки:

    var can = document.getElementById('canvas'); // Ищем элемент по id

    click1.onclick = function(){
        var w = document.getElementById('width1').value; // Получаем введённое значение
        can.setAttribute('width', w); // Меняем ширину canvas элемента
        var h = document.getElementById('height1').value; // Получаем введённое значение
        can.setAttribute('height', h); // Меняем ширину canvas элемента
    };

<canvas id='canvas' width="100" height="100"></canvas>
<input id="width1" type="number">
<input id="height1" type="number">
<button id="click1">Изменить размер холста</button>

БЛОГ НА HUSL

Задать ширину и высоту холста (canvas) на странице

Ответы (1 шт):