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

Question

Допустим, у меня есть HTML-таблица (50 х 50 ячеек) с желтым фоном.Я хотел бы использовать цвета фона ячеек для печати букв (AZ) (например, некоторые ячейки синие и большинство ячеек желтые) в анимированном цикле, используя jQuery.Я могу создать таблицу и указатель, который может проходить по всем ячейкам таблицы так, чтобы он мог менять цвет фона конкретной ячейки (x, y) на другой цвет.Тем не менее, я не понимаю, какие ячейки выделить, чтобы сформировать конкретное письмо.Например, чтобы отобразить букву «А» в сетке 50 х 50, какие ячейки мне нужно изменить на новый цвет фона, чтобы я отображал букву А на экране с ячейками и так далее для всехдругие письма.Есть ли шаблон для этого?

Answer 1

Создайте ячейки с циклом, таким как:

for(var i=65;i<=90;i++) {
    console.log(String.fromCharCode(i));
 }

(65 - код символа для A, 90 для Z). в цикле, прикрепите идентификатор с символом. что-то вроде "charA", "charB". Чем вы можете получить доступ к полям поиска по идентификатору <"char" + letter>.

если вы знаете только (x, y) в сетке 50x50, подсчитайте, с какой буквой оно будет:

String.fromCharCode(65+y*50+x);

Или взять его значение из самого элемента

$(this).val();

Или из атрибута, который вы к нему прикрепляете:

$(this).attr('letter')

Answer 2

Использовать холст (Правка: только для генерации буквенных координат в сетке 50x50, потом не использовать холст).

• Для каждой возможной буквы напечатайте символ на холсте 50x50 html5 / javascript черно-белым, используя что-то вроде: http://typeface.neocracy.org/examples.html

• Затем получите доступ к холсту в каждом пикселе, чтобы проверить, является ли он черным или белым, и сохраните его в многомерных массивах JavaScript. getPixel из HTML Canvas?

• распечатать выходные данные и создать код JavaScript или объект JSON, который сохраняет эти координаты для вашего использования.

После этого у вас будет все, что вам нужно: координаты для каждой буквы и (бонус) с выбранным шрифтом.