У меня есть элемент canvas, и я хочу его масштабировать, но без изменения js-логики. Площадь рисования в js всегда должна быть 600x300px, даже если она отображается в формате HTML как 300x150px. Я знаю, я могу изменить размер изображения со статическим разрешением, но могу ли я сделать то же самое с холстом?
Масштабируемый элемент холста со статическим разрешением
Ответ 1
Изменение размера с помощью CSS масштабирует его
Итак, в основном вы устанавливаете свой размер для рисования объектов и т.д. с помощью свойств width и height, таких как
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 300;
а затем измените отображаемый размер с помощью css
#canvas{
width: 300px;
height: 150px;
}
Ответ 2
Loktar имеет один способ, используя CSS, но это может привести к тому, что некоторые вещи выглядят забавно. Например, пути, масштабируемые с использованием CSS и масштабированные с использованием собственного преобразования canvas, могут выглядеть очень по-разному (с плохо выглядящими CSS, а холсты выглядят гладкими). Это зависит от браузера, хотя и может быть отлично. По крайней мере на хром текст, масштабированный таким образом, выглядит очень плохо.
Вместо этого я бы рекомендовал посмотреть, что я написал здесь, о концепции "модельных" координат: Работа с холстом в разных размерах экрана
Пишите все, как если бы пространство рисования было 600x300, но сохраняйте холст размером 300x150.
Прежде чем рисовать что-либо, используйте ctx.scale(0.5, 0.5);, и все будет выглядеть великолепно!
Вполне возможно, что написать одно приложение canvas и масштабировать его на всевозможные экраны, даже если вы просто нацеливаете один размер экрана.