Как отображать буквы, используя ячейки таблицы html, как цветные пиксели?

Question

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

Answer 1

Создание клеток с петлей, такие как:

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

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

если вы знаете только (х, у) в 50x50 сетке, вычислить, какое письмо она с:

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

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

$(this).val(); 

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

$(this).attr('letter') 

Answer 2

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

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

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

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

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