Блог

Я работал с некоторыми экспериментами с холстом HTML5 и провел серию технических экспериментов редактировать https://github.com/AlexChesser/jsSprite (Клавиши WSAD, Q, E, X в демонстрационных версиях клавиш Minotaur, добавьте C и B в демо-версии Zombie)

Если вы посмотрите на демонстрационный номер 1: 01-draw_minotaur.php вы увидите изображение, нарисованное непосредственно на холсте, и оно выглядит красиво и четко.

Однако, если сравнить с демонстрацией, где я поместил Минотавра на холст, а затем нарисовал этот холст на родительском, результат получается размытым: 03-drawn_minotaur_on_canvas.php

Как я могу убедиться, что изображение холста на холсте не размыто?

РЕДАКТИРОВАТЬ полный код доступен в GIT: https://github.com/AlexChesser/jsSprite

правка 2: обратите внимание, что Google пометил мой домен как вредоносный (что, честно говоря, поскольку хостинг-провайдер был взломан, был краткий момент, когда там было какое-то вредоносное ПО) вместо того, чтобы оставить уязвимую ссылку открытой, я обновил, чтобы указывать исключительно на источник в github.

Это сложная задача!

Для canvas на самом деле вы не используете Style для определения его ширины и высоты.

Таким образом, устанавливая стиль холста, вы фактически искажаете холст.

Таким образом, написание <canvas id="game" width=512 height=512> </canvas> на вашей главной странице решит вашу проблему.

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

Кроме того , разве это не должно быть просто MainContext.drawImage(m.canvas, 0, 0); ? В противном случае вы раздавите Минотавра?