如何使用html5和(canvas或svg)绘制网格

我想绘制如图所示的网格,但我完全不知道我应该从哪里开始。 我应该使用SVG还是应该使用HTML5的 Canvas以及如何绘制它。
请在此指导。 我想要这个网格绘制矩形,圆形或其他图上,我将计算该图的面积,如方形区域。

在这里输入图像说明

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> 

我将widthheight设置为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="grid.html" width="700" height="200"/> 

结果是:

 <img src="grid.html" width="241" height="401"/> 

结果是

请注意,对于这个特定的网格,如果您希望网格的开始和结束时间较长,则必须使用nx 80 + 1 (其中n为任意整数)的宽度和高度。

我张贴我的代码使用canvas在这里,但我也在JSFiddle 这里创build一个工作示例。

 <!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参数使网格大小dynamic化。

但是,如果你的网格大小是静态的,我觉得也许你不需要绘制网格。 只是为了向用户显示一个网格,您可以使用CSS来重复背景图像,如小提琴演示中所示。 这也将是页面性能良好。

使用canvas很容易,这就是我的build议。 我在这里的移动设备上快速响应,但即使下面的psuedocode不是完全正确的,你也应该明白:

你会有一个像这样的循环:

 // "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(); } 

为了覆盖范围,基于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>