如何使用HTML5和（帆布或SVG）

我想畫一個網格，如圖形象，但我完全沒有想法，我應該在哪裏開始繪製網格。我應該使用SVG或者我應該使用帆布與HTML5以及如何繪製它。
這個請指導。我想要這個網格在其上繪製矩形，圓形或其他圖表，並且我將計算該圖的區域，如方形區域。如何使用HTML5和（帆布或SVG）

enter image description here

來源

2013-01-08 Sandeep Kumar

你只是想畫一個網格？我不想在其他方向發展，但我想知道你可以'背景 - 重複'一個小的網格圖像來顯示更大的網格。當然，如果你想根據計算來繪製它，那麼你最好使用'canvas'。 –

106

SVG可以做到這一點很好地使用模式：

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse"> 
     <path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/> 
    </pattern> 
    <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse"> 
     <rect width="80" height="80" fill="url(#smallGrid)"/> 
     <path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/> 
    </pattern> 
    </defs> 

    <rect width="100%" height="100%" fill="url(#grid)" /> 
</svg>

我設置width和height到100%，這樣你就可以定義在實際使用中的寬度和高度，無論是聯SVG：

<div style="width:400px;height:300px"> 
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse"> 
     <path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/> 
     </pattern> 
     <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse"> 
     <rect width="80" height="80" fill="url(#smallGrid)"/> 
     <path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/> 
     </pattern> 
    </defs> 

    <rect width="100%" height="100%" fill="url(#grid)" /> 
    </svg> 
</div>

或<img>元件：

<img src="https://imgh.us/grid.svg" width="700" height="200"/>

結果：

<img src="https://imgh.us/grid.svg" width="241" height="401"/>

導致

請注意，對於此特定網格，如果您希望網格始終以粗筆畫開始和結束，則必須使用n x 80 + 1（其中n爲任何整數）形式的寬度和高度。

來源

2013-01-08 06:54:32

如果你需要一個更靈活的網格在多大的網格線之間的距離，或什麼顏色，筆畫寬度和背景顏色被使用，這也可以很容易地完成。隨意問你是否需要任何進一步的幫助。 –

我非常喜歡這個解決方案。然而，在Firefox和Safari瀏覽器中，如果svg get拉伸得非常大（通過設置：100％並使用非常小的視口），似乎會導致小網格和大網格不完全對齊的舍入誤差：http：// imgur.com/qitOro2有沒有辦法解決這個問題？ –

這是輝煌的 – xxstevenxo

我張貼在這裏使用canvas上，所以我的代碼，但我也創建上的jsfiddle here工作示例。

<!DOCTYPE html> 
<html> 
<head> 
    <title>StackOverflow test bed</title> 
    <script type="text/javascript"> 
     function drawGrid() { 
      var cnv = document.getElementById("cnv"); 

      var gridOptions = { 
       minorLines: { 
        separation: 5, 
        color: '#00FF00' 
       }, 
       majorLines: { 
        separation: 30, 
        color: '#FF0000' 
       } 
      }; 

      drawGridLines(cnv, gridOptions.minorLines); 
      drawGridLines(cnv, gridOptions.majorLines); 

      return; 
     } 

     function drawGridLines(cnv, lineOptions) { 


      var iWidth = cnv.width; 
      var iHeight = cnv.height; 

      var ctx = cnv.getContext('2d'); 

      ctx.strokeStyle = lineOptions.color; 
      ctx.strokeWidth = 1; 

      ctx.beginPath(); 

      var iCount = null; 
      var i = null; 
      var x = null; 
      var y = null; 

      iCount = Math.floor(iWidth/lineOptions.separation); 

      for (i = 1; i <= iCount; i++) { 
       x = (i * lineOptions.separation); 
       ctx.moveTo(x, 0); 
       ctx.lineTo(x, iHeight); 
       ctx.stroke(); 
      } 


      iCount = Math.floor(iHeight/lineOptions.separation); 

      for (i = 1; i <= iCount; i++) { 
       y = (i * lineOptions.separation); 
       ctx.moveTo(0, y); 
       ctx.lineTo(iWidth, y); 
       ctx.stroke(); 
      } 

      ctx.closePath(); 

      return; 
     } 

    </script> 
</head> 
<body onload="drawGrid()"> 
    <canvas id="cnv" width="500" height="500"></canvas> 
</body> 
</html>

使用canvas方法可以使網格尺寸動態改變separation參數。

但是，如果你的網格大小將是靜態我覺得也許你不需要畫電網。只是爲了顯示網格用戶着想，你可以使用CSS來重複背景圖像作爲小提琴here證明。這在頁面性能上也會很好。

來源

2013-01-08 05:47:30

是否可以減小這些行的筆劃寬度？我嘗試過使用小於1的數字。在上面的SVG示例中工作良好，但我無法使用此Canvas解決方案複製其清晰度。 – JohnDevelops

你所指的脆性是因爲畫布如何渲染線條。參考這篇文章http://www.mobtowers.com/html5-canvas-crisp-lines-every-time/。也有一個更新的jsFiddle爲你http://jsfiddle.net/B2EBw/137/ –

它很容易用帆布做的，這就是我的建議。我對移動迅速作出反應在這裏，但你應該得到的，即使下面的僞代碼是不是完全正確的想法：

你有一個循環是這樣的：

// "Ctx" is your canvas context 
// "Width," "Height," and other vars that start with a capital letter are set according 
// to your canvas size or preference 

var i; 
for (i=0; i < Height; i += GridSize) { 
    ctx.lineWidth(1.0+((i%10)==0)); 
    ctx.moveTo(0,i); 
    ctx.lineTo(Width,i); 
    ctx.stroke(); 
} 
for (i=0; i < Width; i += GridSize) { 
    ctx.lineWidth(1.0+((i%10)==0)); 
    ctx.moveTo(i,0); 
    ctx.lineTo(i,Height); 
    ctx.stroke(); 
}

來源

2013-01-08 05:49:25 bjorke

爲了覆蓋範圍，基於CSS的方法如何？

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
     html { 
     height: 100%; 
     } 

     body { 
     margin: 0; 
     padding: 0; 
     height: 100%; 
     background-color: #434343;  
     background-size: 75px 75px; 
     background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent); 
     } 

     canvas { 
      width:100%; 
      height:100%; 
      position:absolute; 

      background-color: transparent; 
      background-size: 15px 15px; 
      background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent); 
     } 

     </style> 
    </head> 
    <body> 
     <canvas></canvas> 
    </body> 
</html>

來源

2016-04-20 21:38:02 Corvusoft

爲上述答案增加了一個jsfiddle - https://jsfiddle.net/3pfc4avp/ – Murukesh

如何使用HTML5和（帆布或SVG）

回答

相關問題