如何使用 html 表格单元格作为彩色像素显示字母？答案

【问题标题】：How can I display letters using html table cells as colored pixels?如何使用 html 表格单元格作为彩色像素显示字母？
【发布时间】：2012-04-12 22:54:14
【问题描述】：

假设我有一个黄色背景的 html 表格（50 x 50 单元格）。我想使用单元格的背景颜色在动画循环中使用 jQuery 打印字母（A-Z）（例如，一些单元格为蓝色，大多数单元格为黄色）。我可以创建一个表格和一个指针，它可以循环遍历表格的所有单元格，以便它可以将特定单元格 (x,y) 的背景颜色更改为不同的颜色。但是，我不明白要突出显示哪些单元格以形成特定字母。例如，要在 50 x 50 网格上显示字母“A”，我需要将哪些单元格更改为新的背景颜色，以便在屏幕上显示字母 A 和单元格，依此类推其他字母。这有什么模式吗？

【问题讨论】：

我无法放弃掌握你想要实现的目标。
我是否正确假设您正在尝试实施一些晦涩的验证码或其他东西？
并非如此。我只想创建一个动画，它会在循环中显示一个人的名字。例如“Kai”将首先显示 K，然后是 A，然后是 I
这里没有通往幸福的捷径。使用您最喜欢的图形编辑器，创建一个 50x50 像素大小的新图像，插入一个字符并查看它占据了哪些像素。
或者，如果您不喜欢桌子，您可以在 50x50 的画布上绘制一个角色并将其放大。

标签： javascript jquery html html-table cell

【解决方案1】：

使用画布（编辑：仅用于生成 50x50 网格中的字母坐标，之后不再使用画布）。

对于每个可能的字母，在 50x50 html5/javascript 画布上以黑白方式打印字符，使用如下方式： http://typeface.neocracy.org/examples.html
然后访问每个像素中的画布以检查它是黑色还是白色，并将其保存在多维javascript数组中。 getPixel from HTML Canvas?
打印输出并创建保存这些坐标供您使用的 javascript 代码或 JSON 对象。

之后，您将拥有所需的一切：每个字母的坐标，以及（奖励）您选择的字体。

【讨论】：

逻辑上它应该可以工作，但是，我不打算使用 html5 画布。还有其他解决方法吗？
canvas的使用只是为了生成坐标，以后不要在代码中使用！

【解决方案2】：

使用循环创建单元格，例如：

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

（65 是A 的字符代码，90 是Z 的字符代码）。在循环中，用字符附加 id。类似“charA”、“charB”的东西。您可以访问搜索 id 的字段。

如果您只知道 50x50 网格中的 (x,y)，请计算它与哪个字母：

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

或者从元素本身获取它的值

$(this).val();

或者来自你附加到它的属性：

$(this).attr('letter')

【讨论】：

我不想在单个单元格上打印字母。我希望字母使用不同单元格的数量完全占据网格。
准确地说，我想在 50 x 50 网格上显示字母的形状
抱歉，问题误解了。添加了新答案
这对我有帮助。谢谢你。 +1