How can I draw alphabet letters on screen using jQuery
Question
Let's say I have a html table with cells background as red. I would like to print alphabet letters(AZ) in a loop on the table using jquery, for example letter J would look like as in the following image:
I can create a table and a pointer which can loop through all the cells of the table and change the background color to black. However, I don't understand which cells to highlight for a particular alphabet. For example, to display letter "A" on a 30 x 30 table, which cells do I need to change its background such that I get letter A displayed on the screen and so on for other letters. Is there any pattern for this?
Here is the code i have so far:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var x=0;
var y=1;
function movePointer(){
printCell();
if(x==30){
x=0;
y++;
}
if(y==31){
y=1;
x=0;
$(".pointer").css("background","red");
}
x++;
}
function printCell(){
$("#"+x+"_"+y).css("background","black");
}
function eraseCell(){
}
setInterval(movePointer,1);
});
</script>
</head>
<body style="margin:0; padding:0">
<?php
$h=30;
$v=30;
echo "<table border='1'>";
for($y=1;$y<=$v;$y++){
echo "<tr>";
for($x=1;$x<=$h;$x++){
echo "<td style='border:1px solid red; width:20px; height:20px'>";
echo "<div style='width:20px; height: 20px; background:red' class='pointer' id='".$x."_".$y."'></div>";
echo "</td>";
}
echo "</tr>";
}
?>
</table>
</body>
3 answers
solution1
2 2012-03-29 12:50:34
To achieve such a thing you will require something like a " bitmap ", so you will need an alphabet map/array that has attached for each element another array that has the index of squares to be colored differently.
EDIT:
A simple example would be using something like:
var alphabet = ("abcdefghijklmnopqrstuvwxyz").split("");
var letterBitmap = {};
$.each(alphabet,function(index,data){
letterBitmap[data] = new Array("1.1");
console.log(letterBitmap[data]);
});
Take note that the line that says new Array("1.2") is actually the coordinate for the first block that needs to be collored, given 1 as the row and 2 as the column. For a letter you should have something like:
new Array("1.1","2.3","5.2") etc., note that the coordinates are not valid they are just as proof of concept.
After you have data in such a format it is very simple to go trough that Array of coordinates, split them and choose the right index to color.
Hope it helps.
solution2
0 2012-03-29 12:50:00
您可以为每个字母创建某种位图作为多维数组。
solution3
0 2012-03-29 15:47:10
You can write a simple html that let you draw the letters by clicking on the cells. Then return a hex number with the state of the cells. Then use the resulting data in your code.
Other option would be to search in google for some "Ascii font table" (I tried, ..not luck) with the letters already done.
If everything fails, you can use the console command "banner" to generate this text for aZ.
The easier way is to write this mini-draw html tool :D
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.