В чем разница между html5-масштабом холста и увеличением размеров холста для масштабирования?

Question

Как упомянуто в веб-документах MDN для масштаба холста:

По умолчанию одна единица на холсте составляет ровно один пиксель.Если мы применим, например, коэффициент масштабирования 0,5, результирующая единица станет 0,5 пикселей, и поэтому формы будут нарисованы с половинным размером.Аналогичным образом установка коэффициента масштабирования в 2,0 приведет к увеличению размера блока, и одна единица теперь станет двумя пикселями.Это приводит к тому, что фигуры рисуются в два раза больше.

Так же это работает, когда мы увеличиваем ширину / высоту холста для целей масштабирования или просто растягиваем изображение, это влияеткачество изображения?

Answer 1

Методы рисования контекста Canvas запрашивают у нас некоторые координаты и длины в их методах.Например, x, y, width, height метода fillRect(x y, width, height).

Все эти значения не имеют единиц измерения, поэтому давайте назовем это magical-unit.

Поскольку холст является растровым изображением, было решено, что сначала каждая магическая единица представляет один пиксель этого растрового изображения.Когда мы устанавливаем холст width или height, мы просто меняем количество пикселей, которое может содержать холст.

Итак, из этого мы можем построить красивую магическую единицу сетки canvas.width * canvas.height * 1.
В этом случае при передаче (10, 10) в качестве аргументов методу, ожидающему координаты в магические единицы , указатель будет перемещен впиксели с координатами 10, 10.

Теперь есть некоторые методы, например scale(), но также translate(), transform() и т. д., которые изменят нашу магическую единицу-сетку .Например,

translate(5, 10) переместит нашу сетку магических единиц на 5 магических единиц по горизонтали и 10 по вертикали.Так что теперь координаты (10,10) будут фактически указывать на пиксели с координатами 15, 20 (10 + 5, 10 + 10).

А после вызова scale(2, 2) одна магическая единица теперь будет равна двум пикселям на холсте.Итак, если мы передадим (10, 10) тому же методу, что и выше, наш указатель фактически переместится на пиксели с координатами 20, 20.

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

Answer 2

Если вы непосредственно измените атрибут width или height элемента HTML холста, вы измените размер буфера пикселов холста и уничтожите все предыдущее содержимое холста.Это не эффективный способ масштабирования контента: -)

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

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

Черновик редактора 2018-09 CSS Images Module 3-го уровня предлагает свойство image-renderingконтролировать, как CSS интерполирует изображения при масштабировании.В отсутствует поддержка в некоторых основных браузерах на момент черновика.

См. Также этот связанный вопрос об использовании интерполяции ближайшего соседа для масштабирования объектов холста .

Answer 3

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

При масштабировании внутри холста механизм рисования знает, например, что рисовать 2x2 пикселя, когдамасштабирование установлено на 2. Поэтому изображение остается «резким».