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

metalim Sep 12 2013 at 00:56

Спасибо.

gusakovm Jan 7 2011 at 15:14

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

shpaker Jan 7 2011 at 15:18

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

Isis Jan 7 2011 at 14:54

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

simpel Jan 7 2011 at 16:45

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

shpaker Jan 7 2011 at 16:51

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

UFO landed and left these words here

cbone Jan 7 2011 at 16:50

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

shpaker Jan 7 2011 at 17:11

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

agul Jan 8 2011 at 12:15

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

cbone Jan 8 2011 at 18:07

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

shpaker Jan 8 2011 at 18:09

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

AlexXsWx Jan 8 2011 at 14:52

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

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

shpaker Jan 8 2011 at 15:04

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

w32blaster Jan 10 2011 at 11:03

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

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

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