问题
Let's say I have an html table (50 x 50 cells) with a yellow background. I would like to use the background colors of the cells to print letters (A-Z) (e.g. some cells blue and most cells yellow) in an animated loop, using jQuery. I can create a table and a pointer which can loop through all the cells of the table such that it can change the background color of a particular cell (x,y) to different color. However, I don't understand which cells to highlight to form a particular letter. For example, to display the letter "A" on the 50 x 50 grid, which cells do I need to change to a new background color such that I get the letter A displayed on the screen with the cells, and so on for all the other letters. Is there any pattern for this?
回答1:
Create the cells with a loop such as:
for(var i=65;i<=90;i++) {
console.log(String.fromCharCode(i));
}
(65 is the char code for A, 90 for Z).
in the loop, attach id with the char. something like "charA", "charB".
Than you can access the fields searching the id <"char" + letter>.
if you know only the (x,y) in the 50x50 grid, calculate which letter it is with:
String.fromCharCode(65+y*50+x);
Or take the value of it from the elment itself
$(this).val();
Or from attribute you attach to it:
$(this).attr('letter')
回答2:
Use Canvas (Edit: only for the generation of the letter coordinates in the 50x50 grid, no usage of canvas afterwards).
For each letter possible, print the char on a 50x50 html5/javascript canvas in black and white using something like: http://typeface.neocracy.org/examples.html
Then access the canvas in each pixel to check if it black or white, and save it in multidimensional javascript arrays. getPixel from HTML Canvas?
print the output and create javascript code or JSON object that saves those coordinates for your use.
After that you'll have all you need: the coordinates for each letter, and (bonus) with a font of your choice.
来源：https://stackoverflow.com/questions/9922911/how-can-i-display-letters-using-html-table-cells-as-colored-pixels