Ограничивающий (зажимной) размер холста

Question

Я хочу создать подвижный мир для своей HTML-игры, поэтому я поместил холст 1600x1200 в свой элемент div 800x600 и, используя левую и верхнюю части, переместил мир.Я ожидал, что div ограничит размер моего холста, но вместо этого мой холст перекрывает границы моего div.Div не растягивается, холст масштабируется независимо от div.

Я пробовал! Важный, максимальная ширина и максимальная высота, разные показы, ничего не работает.Использование CSS для ширины и высоты просто масштабирует холст.Я также попытался поместить свой холст в SVG как посторонний объект, но я получаю сообщение об ошибке «getContext не является функцией».

Итак, как я могу ограничить размер моего холста?

Answer 1

div будет расширяться до размера вашего canvas, если только div не имеет overflow: hidden;, установленного в его CSS. Дочерний элемент больше, чем родительский элемент, и вы не указали браузеру строго ограничивать размер родительского элемента.

Атрибуты max-width и max-height вам здесь не помогут, потому что вы не помещаете «обертываемый» контент в div. Если вы поместите текст в div с установленным max-width, значение будет соблюдено. Если вы поместите элемент с неизменным размером, например, элемент image или canvas, браузер не сможет динамически обернуть его, как набор плавающих divs или какой-либо текст. В этом случае у вас есть overflow, который нужно обрабатывать по-другому.

Вы можете достичь того, что ищете, играя с атрибутами position и / или margin для элемента canvas, если вы установите родительский элемент div, чтобы скрыть переполнение.