從Javascript數組某種

確定的形象，所以我有以下數據數組：從Javascript數組某種

shipGrid = [ 
       ['0','0','0','0','0','0','0','0','0','0'], 
       ['0','0','0','0','0','0','0','0','0','0'], 
       ['0','0','1','0','0','0','0','1','0','0'], 
       ['0','0','0','0','0','0','0','0','0','0'], 
       ['0','0','0','0','1','1','0','0','0','0'], 
       ['0','0','0','0','0','0','0','0','0','0'], 
       ['0','0','1','0','0','0','0','1','0','0'], 
       ['0','0','0','1','1','1','0','0','0','0'], 
       ['0','0','0','0','0','0','0','0','0','0'], 
       ['0','0','0','0','0','0','0','0','0','0']];

我已經翻譯成這個可點擊組<li>的： alt text

是有可能將這個<li>的數組轉換成某種形象嗎？它不一定只是一個PNG，GIF或JPG - 它可以是基於SVG或Vector的東西。

我有點難住，我想這樣做沒有服務器端語言 - 所以我想也許是一個SVG庫或工作得很好......？

乾杯。

編輯：這需要在瀏覽器本身查看。

來源

2011-01-06 Barrie Reader

多少backwords與舊的瀏覽器配伍你需要什麼？ – 2011-01-06 09:29:44

我真的不需要太多的東西，它會基於CSS3 – 2011-01-06 11:10:34

既然你提到了SVG，我想你可以接受一個只能在現代瀏覽器中工作的解決方案。如果是這樣，你應該有把握地看看HTML 5 <canvas>元素。但請注意，在版本9之前，Internet Explorer中不會支持canvas元素。ExplorerCanvas是一個嘗試填補這一空白的開源項目，但我沒有嘗試過。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>From JavaScript array to canvas</title> 
     <style> 
      body { 
       background-color: #eee; 
      } 
     </style> 
    </head> 
    <body> 
     <canvas id="image"></canvas> 
     <script> 
      var imageArray = [ 
       [0,0,0,0,0,0,0,0,0,0], 
       [0,0,0,0,0,0,0,0,0,0], 
       [0,0,1,0,0,0,0,1,0,0], 
       [0,0,0,0,0,0,0,0,0,0], 
       [0,0,0,0,1,1,0,0,0,0], 
       [0,0,0,0,0,0,0,0,0,0], 
       [0,0,1,0,0,0,0,1,0,0], 
       [0,0,0,1,1,1,1,0,0,0], 
       [0,0,0,0,0,0,0,0,0,0], 
       [0,0,0,0,0,0,0,0,0,0] 
      ]; 

      var imageCanvas = document.getElementById('image'); 

      // getContext will be supported in Internet Explorer 9. 
      if (imageCanvas.getContext) { 
       imageCanvas.height = imageArray.length; 
       imageCanvas.width = imageArray[0].length; 

       var imageContext = imageCanvas.getContext("2d"); 

       imageContext.fillStyle = "#fff"; 
       imageContext.fillRect(0, 0, imageCanvas.width, 
        imageCanvas.height); 

       imageContext.fillStyle = "#000"; 
       for (var x = 0; x < imageCanvas.width; x++) { 
        for (var y = 0; y < imageCanvas.height; y++) { 
         if (imageArray[y][x] === 1) { 
          imageContext.fillRect(x, y, 1, 1); 
         } 
        } 
       } 
      } 
     </script> 
    </body> 
</html>

Above HTML as renderend in Google Chrome.

上面的代碼只能在谷歌瀏覽器進行了測試。

Dive Into HTML5在畫布元素上有一個不錯的篇章。其他資源是Mozilla開發者網絡的Canvas tutorial。你也可以看看Bill Mill's canvas tutorial。

來源

2011-01-06 09:26:36

Javascript本身不能將HTML轉換爲圖片，您需要使用Ajax和服務器端插件來爲您完成此操作。

我會通過發送shipGrid數據到服務器解決這個問題，服務器解釋發送的數據並呈現所需樣式的圖像。

不知道您可以使用哪種服務器端語言，我們不能進一步提供幫助，但任何圖像插件都應該有豐富的文檔和示例。

編輯

忘了SVG的，你也許能夠得到JS動態渲染SVG圖像的你，在這個俄羅斯方塊例子看看：

http://croczilla.com/bits_and_pieces/svg/samples/svgtetris/svgtetris.svg

乘坐看源頭，應該給你一些工作。

來源

2011-01-06 09:25:42

這樣做的一個簡單的方法是將其保存爲Portable Bitmap Format (PBM)，它只是一個簡單的ASCII文件

上面的例子看起來sonmething像在內容這個ASCII文件

P1 
# This is a smiley 
10 10 
0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 
0 0 1 0 0 0 0 1 0 0 
0 0 0 0 0 0 0 0 0 0 
0 0 0 0 1 1 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 
0 0 1 0 0 0 0 1 0 0 
0 0 0 1 1 1 1 0 0 0 
0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0

以下

將tour數組轉換爲如上所述的地圖非常簡單。

如果您從JavaScript中保存此信息，那麼用戶的瀏覽器安全設置可能會阻止您這樣做。請參閱以下鏈接：http://www.c-point.com/JavaScript/articles/file_access_with_JavaScript.htm

編輯：

啊，這形象類型不會顯示在瀏覽器。用瀏覽器看看下面的鏈接，支持的圖像類型：

http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

來源

2011-01-06 09:27:05

從Javascript數組某種

回答

相關問題