Холст искажает рисунок.Как получить коэффициент масштабирования между заданным размером и стилизованным размером?

Question

У меня есть этот холст:

<canvas id="game" width="280" height="280"></canvas>

CSS создает стиль холста с помощью:

canvas
{
    width: inherit;
    height: 280px;
}

Поскольку ширина может изменяться, холст искажает рисунок.Мне нужно знать, как это компенсировать. Кто-нибудь, кто может мне помочь?

Answer 1

Это та же проблема, с которой столкнулась команда Mozilla Bespin.(назад, когда они использовали Canvas, до того, как они слились с Ace)

Не давайте Canvas никаких правил ширины / высоты CSS. Обычно это заканчивается болью.Поместите холст в элемент Div, в котором есть только одна вещь (сам холст)

Поскольку div холст-родитель изменяет размер, измените размер холста (canvas.width и canvas.height) насоответствует размеру div.

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