在javascript中創建簡單像素（x，y座標）塊字母

Question

我試圖找到現有的一段腳本，它可能會幫助我用x，y座標寫出各個像素中的簡單塊字母。

我一直在尋找自動繪製這樣的事情至少包括： Image

雖然有些scaleablity /質量功能將是很好，雖然不是必須的：example

我一個接口工作，將只允許最基本的JavaScript實現（即基本循環，ifs和函數），而無需使用一些較大的全包庫。

Answer 1

可以使用<canvas>元素繪製，然後確定你的塊文本作爲一個二維數組，例如字母「E」可以是：

var E = [ 
    ["#","#","#","#","#","#","#"], 
    ["#"," "," "," "," "," "," "], 
    ["#"," "," "," "," "," "," "], 
    ["#"," "," "," "," "," "," "], 
    ["#","#","#"," "," "," "," "], 
    ["#"," "," "," "," "," "," "], 
    ["#"," "," "," "," "," "," "], 
    ["#"," "," "," "," "," "," "], 
    ["#","#","#","#","#","#","#"] 
]; 

當值"#"是在像素畫。然後，你可以定義一個函數用於繪製drawLetter(x, y, L)其中x和y`是你想在畫布上放置文本：

function drawLetter(x, y, L) 
{ 
    for(var i = 0; i < L.length; i++) 
     for(var j = 0; j < L[i].length; j++) 
      if(L[i][j] == "#") 
       ctx.fillRect(x+j, y+i, 1, 1); 
}; 

最後，你可以通過做叫它：drawLetter(50, 50, E)

2D Array Example

---

如果您寧願使用具有相對點數組的變量，而是可以做類似的概念，則該變量不會如那樣直觀比最後的方法，雖然。所以現在假設我們這樣定義一個字母：

var E = { {x:0, y:0}, {x:1, y:0}, ... }; 

然後你就可以通過對象的數組簡單地重複，在drawLetter功能將類似於：

function drawLetter(x, y, L) 
{ 
    for(var i = 0; i < L.length; i++) 
     ctx.fillRect(x + L[i].x, y + L[i].y, 1, 1); 
} 

Pure Point Example