如何使用jQuery在屏幕上繪製字母表

假設我有一個html表格，單元格背景爲紅色。我想在使用jQuery的表圈打印字母（AZ），例如字母J會是什麼樣子，如下圖所示：如何使用jQuery在屏幕上繪製字母表

我可以創建一個表和一個指針，可以遍歷表格的所有單元格並將背景顏色更改爲黑色。但是，我不明白哪個單元格要突出顯示某個特定的字母表。例如，要在30 x 30的表格上顯示字母「A」，需要更改其背景，以便在屏幕上顯示字母A，以及其他字母。這是否有任何模式？

這裏是我的代碼至今：

<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>

來源

2012-03-29 cam lover

只是好奇心：你想用什麼？ – TPete 2012-03-29 14:07:27

凸輪從我能理解你的意見你實際上有2個問題，一個如何從字母中提取位圖，以及兩個如何在屏幕上繪製它。第二，我爲你提供了第一個解決方案，你應該發佈一個新問題或者編輯一個新問題。 – 2012-03-29 14:29:34

是的，但要提取它，我需要先創建它。所以它攜手並進。沒有第一個我怎麼能得到第二個 – 2012-03-29 14:33:51

你可以建立某種形式的位圖的每個字母作爲一個多維數組。

來源

2012-03-29 12:50:00 worenga

我該怎麼做？ – 2012-03-29 12:51:51

任何示例代碼？ – 2012-03-29 12:55:32

要實現這樣你會需要一些像「位」的事情，所以你需要上附加了的字母映射/陣列每個元素另一陣列具有指數的方格顏色不同。

編輯：

一個簡單的例子就可以使用類似：

var alphabet = ("abcdefghijklmnopqrstuvwxyz").split(""); 
var letterBitmap = {}; 
$.each(alphabet,function(index,data){ 
letterBitmap[data] = new Array("1.1"); 
console.log(letterBitmap[data]); 
});

，請注意該行表示，新的Array（「1.2」）實際上是座標爲需要第一個塊被排序，給定1作爲行，2作爲列。對於一封信你應該有這樣的東西：

新陣列（「1.1」，「2.3」，「5.2」）等，請注意，座標是無效的，它們只是概念驗證。

以這種格式存儲數據後，可以非常簡單地通過該數組座標，將它們分開並選擇正確的顏色索引。

希望它有幫助。

來源

2012-03-29 12:50:34

怎麼樣？任何示例代碼？ – 2012-03-29 12:54:46

編輯，你可以找到一個工作的例子http://jsfiddle.net/apLHv/4/ – 2012-03-29 13:05:05

它不顯示任何東西 – 2012-03-29 13:24:01

您可以編寫一個簡單的html，讓您通過單擊單元格來繪製字母。然後返回一個十六進制數字和單元格的狀態。然後在代碼中使用結果數據。

其他選項是在谷歌搜索一些「Ascii字體表」（我試過，..不幸）與已完成的字母。

如果一切都失敗了，可以使用console命令「banner」爲a-z生成這個文本。

更簡單的方法是編寫這個迷你繪製的html工具：D

來源

2012-03-29 15:47:10 Tei

如何使用jQuery在屏幕上繪製字母表

回答

相關問題