Comments 22
Эцсамое, в подобных статьях принято приводя примеры размещать где-нибудь демку, чтобы посмотреть прямо в браузере, ничего никуда не копипастя.
+7
А я специально не размещаю, чтоб народ сам что-то делал
0
Ну, без демок «на посмотреть» интереса меньше, это давно замечено. Но дело ваше.
+8
За весь пост тут один более или менее интересный пример и ссылка на него присутствует
+1
Все ссылки нерабочие.
+1
Ок, в ближайшие часы исправлю
0
Всё, сделал дело. Вообще пришлось весь пост перекроить потому что Хабр отказывался его нормально сохранять в том виде котором он был. Ссылки на фидлы поставил.
1. [habr] Canvas: images. Example #1, #2, #3
2. [habr] Canvas: images. Example #4
1. [habr] Canvas: images. Example #1, #2, #3
2. [habr] Canvas: images. Example #4
0
Как правило ни кто ничего не делает «сам» до реального проекта. А видеть в чем преимущество технологии перед альтернативами на конкретном примере всегда приятно. Не школа ведь, врятли даже один читатель после поста сразу же начнет «пробовать».
А за пост огромное спасибо, читал и прошлый пост.
А за пост огромное спасибо, читал и прошлый пост.
+1
Собственно, собственно, собственно, собственно, собственно, собственно :)
0
UFO just landed and posted this here
Мне кажется что просто в конце (или начале) нужно ставить ссылку на пример. Мне вот не хочется читать полностью статью, а код посмотреть очень интересно. Для этого пришлось искать по тексту ссылочку на ваш пример.
0
Ну раз народ требует то сейчас расставлю ссылки на примеры
+2
Может я чего не понимаю, но по-моему вы чуть загнули с картой. Достаточно было просто матрицы с индексами текстурок, т.е. структуры вроде
[
[1, 1, 1, 1, 1],
[1, 2, 3, 4, 1],
[1, 5, 5, 5, 1],
…
];
Так куда нагляднее, да и редактировать не в пример проще.
[
[1, 1, 1, 1, 1],
[1, 2, 3, 4, 1],
[1, 5, 5, 5, 1],
…
];
Так куда нагляднее, да и редактировать не в пример проще.
+1
Просто по моему скромному мнению человеку более понятно и наглядно когда картинка представлена в виде таблицы где есть соответствующие столбцы (координата х) и строки (координаты у). Хотя да можно было проиндексировать эдементы от 1 до 12, а при отрисовке всё равно пришлось бы вычислять две координаты которые бы описывали местоположение нужного кусочка в большой картинке, так что не много избежали математику которая бы не всем была бы сразу понятно. В примере из предыдущего поста я кстати делал карту именно массивом индексамов, но там спрайты рисовались не фрагментами.
0
Вы вручную прорисовывали тайл по всему холсту, это верно. От себя хочу добавить, что ещё есть возможность сделать то же самое через метод createPattern, получится тот же результат. С одним только «но»: если вы захотите размножить паттерн только по одной из осей (ну что-то типа
ctx.createPattern(this, 'repeat-x');
например), то это не будет работать в Firefox. Я тоже на практике пришёл к выводу, что приходится рисовать вручную повторяющийся фон.0
Sign up to leave a comment.
HTML5 CANVAS шаг за шагом: Изображения