Изменение размера и масштабирование HTML5 Canvas и содержимого

Question

Я работаю над приложением, которое включает в себя графический интерфейс (например, Paint или Photoshop) в качестве элемента холста HTML5.

Я хотел бы иметь возможность динамического изменения размера элемента canvas и данных пикселей на нем.для имитации функции масштабирования.Мои мысли имеют какой-то видовой экран, который содержит элемент canvas.Затем я могу изменить размер холста и его содержимого внутри области просмотра (который остается того же размера).

Как мне лучше всего реализовать эту функцию?

Answer 1

Вы можете сделать это очень легко, отделив дисплей от поверхности рисования, введя другой холст. Создайте скрытый холст, используя

var canvas = document.createElement('canvas');

Затем нарисуйте всю свою сцену на этом холсте. Затем перетащите содержимое этого холста на другой холст, который фактически виден пользователю, используя метод drawImage (который также может получить холст вместо изображения). Если вы хотите увеличить масштаб сцены, вы можете уменьшить исходный прямоугольник (параметры sy, sx, sw и sh на drawImage) на скрытом холсте при рисовании это на визуальный холст. Это даст вам эффект масштабирования.

Однако, если вы все равно полностью перерисовываете каждый кадр на холсте, вы также можете просто взглянуть на scale метод объекта canvas.

Answer 2

Я успешно использую transform: scale () для элемента canvas и его содержимого.Однако в ситуациях, когда элемент canvas необходимо ввести с помощью iframe и преобразования: масштабирование происходит в iframe, он работает в сафари, но не в мобильном сафари.Соответствующая ссылка ниже

https://stackoverflow.com/questions/11265483/inconsistencies-when-transform-scale-on-iframe-containing-canvas