HTML5 CANVAS шаг за шагом: Изображения

[kekekeks]

Эцсамое, в подобных статьях принято приводя примеры размещать где-нибудь демку, чтобы посмотреть прямо в браузере, ничего никуда не копипастя.

[shpaker]

А я специально не размещаю, чтоб народ сам что-то делал

[kekekeks]

Ну, без демок «на посмотреть» интереса меньше, это давно замечено. Но дело ваше.

[shpaker]

За весь пост тут один более или менее интересный пример и ссылка на него присутствует

[metalim]

Все ссылки нерабочие.

[shpaker]

Ок, в ближайшие часы исправлю

[shpaker]

Всё, сделал дело. Вообще пришлось весь пост перекроить потому что Хабр отказывался его нормально сохранять в том виде котором он был. Ссылки на фидлы поставил.
1. [habr] Canvas: images. Example #1, #2, #3
2. [habr] Canvas: images. Example #4

[metalim]

Спасибо.

[gusakovm]

Как правило ни кто ничего не делает «сам» до реального проекта. А видеть в чем преимущество технологии перед альтернативами на конкретном примере всегда приятно. Не школа ведь, врятли даже один читатель после поста сразу же начнет «пробовать».
А за пост огромное спасибо, читал и прошлый пост.

[shpaker]

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

[Isis]

dl.dropbox.com/u/8307275/p/imgExample.htm

[simpel]

Собственно, собственно, собственно, собственно, собственно, собственно :)

[shpaker]

Сейчас исправлюсь )

[cbone]

Мне кажется что просто в конце (или начале) нужно ставить ссылку на пример. Мне вот не хочется читать полностью статью, а код посмотреть очень интересно. Для этого пришлось искать по тексту ссылочку на ваш пример.

[shpaker]

Ну раз народ требует то сейчас расставлю ссылки на примеры

[agul]

Спасибо за ссылки. Сразу видно, что именно представляет каждый код.

[cbone]

Спасибо, так гораздо удобнее

[shpaker]

Вам спасибо что читали ))

[AlexXsWx]

Может я чего не понимаю, но по-моему вы чуть загнули с картой. Достаточно было просто матрицы с индексами текстурок, т.е. структуры вроде
[
[1, 1, 1, 1, 1],
[1, 2, 3, 4, 1],
[1, 5, 5, 5, 1],
…
];

Так куда нагляднее, да и редактировать не в пример проще.

[shpaker]

Просто по моему скромному мнению человеку более понятно и наглядно когда картинка представлена в виде таблицы где есть соответствующие столбцы (координата х) и строки (координаты у). Хотя да можно было проиндексировать эдементы от 1 до 12, а при отрисовке всё равно пришлось бы вычислять две координаты которые бы описывали местоположение нужного кусочка в большой картинке, так что не много избежали математику которая бы не всем была бы сразу понятно. В примере из предыдущего поста я кстати делал карту именно массивом индексамов, но там спрайты рисовались не фрагментами.

[w32blaster]

Вы вручную прорисовывали тайл по всему холсту, это верно. От себя хочу добавить, что ещё есть возможность сделать то же самое через метод createPattern, получится тот же результат. С одним только «но»: если вы захотите размножить паттерн только по одной из осей (ну что-то типа

ctx.createPattern(this, 'repeat-x');

например), то это не будет работать в Firefox. Я тоже на практике пришёл к выводу, что приходится рисовать вручную повторяющийся фон.