HTML5: рендеринг абсолютных изображений с использованием canvas - PullRequest
0 голосов
/ 16 ноября 2011

Я экспериментирую с canvas как часть моего введения в HTML5. Это работа по заданию, но я вообще не прошу никакой помощи по фактической курсовой работе.

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

Я создал механизм анимации, который загружает изображения в массив, а затем перебирает их с определенной скоростью. Это не проблема, и я предполагаю, что это не вызывает проблемы, поскольку это происходило, когда я рисовал изображение на холсте без компонента анимации.

Я думаю, что это естественное поведение для масштабирования / перекоса изображений при изменении размера окна, поэтому я победил это, просто перерисовав всю вещь после изменения размера окна.

Изображения, которые я использую, являются изометрическими и нарисованы на уровне пикселей. Это вызвало бы искажение? Кажется, установка размеров на функцию drawImage () не работает, все. Я использую JavaScript для манипулирования и рендеринга холста.

Обычно я пытался бы решить это сам, но у меня нет времени задуматься, почему, потому что я понятия не имею, почему оно даже масштабирует / наклоняет изображение после его рисования на холсте. Я не могу поделиться кодом по понятным причинам. Я должен также отметить, что размер холста - это общая ширина области просмотра, так как я разрабатываю игру.

Мой вопрос: кто-нибудь сталкивался с этим и как бы я это исправить?

Спасибо за вашу помощь.

Ответы [ 2 ]

1 голос
/ 16 ноября 2011

Кажется, что вы установили размеры холста с помощью CSS.Попробуйте определить их как атрибуты html.Пример:

<canvas id="test" width="100" height="100">Fallback content</canvas>

Редактировать: ширина / высота элемента холста будет установлена ​​на 100/100 пикселей.

0 голосов
/ 25 декабря 2011

Да, проблема была в том, что я устанавливал размеры холста с помощью CSS. Элемент canvas обрабатывается как изображение, и я фактически масштабировал холст с помощью CSS, а не изменял его размер. Спасибо за помощь. - Отметьте только сейчас

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...