我想画一个网格如图所示，但我完全不知道我应该从哪里开始。应该使用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>
我将宽度和高度设置为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="http://imgh.us/grid.svg" width="700" height="200"/>
结果是：
<img src="http://imgh.us/grid.svg" width="241" height="401"/>
结果是
注意，对于这个特定的网格，你必须使用形式n x 80 1(n是任何整数)的宽度和高度，如果你想让网格以粗笔画开始和结束。