如何使用html5和（canvas或svg）绘制网格 [英] how to draw grid using html5 and (canvas or svg)

问题描述

我想绘制一个如图所示的网格，但我完全不知道该从哪里开始。我应该使用 SVG ，还是应该使用 Canvas 和 HTML5 以及如何绘制它。

请在此指导。我希望这个网格在其上绘制矩形，圆形或其他图表，并且我将计算该图的面积，例如平方的面积。

解决方案

SVG可以做这很好地使用模式：

 < svg width =100％height =100％xmlns =http：/ /www.w3.org/2000/svg\"> 
< defs> 
 <路径d =M 8 0 L 0 0 0 8fill =nonestroke =graystroke-width =0.5/> 
< / pattern> 
 < rect width =80height =80fill =url（#smallGrid）/> 
< path d =M 80 0 L 0 0 0 80fill =nonestroke =graystroke-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> 
 <路径d =M 8 0 L 0 0 0 8fill =nonestroke =graystroke-width =0.5/> 
< / pattern> 
 < rect width =80height =80fill =url（#smallGrid）/> 
<路径d =M 80 0 L 0 0 0 80fill =nonestroke =graystroke-width =1/> 
< / pattern> 
< / defs> 
 
< rect width =100％height =100％fill =url（#grid）/> 
< / svg> 
< / div> 
  

或者< img> 元素：

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

结果为：



  < img src =https://imgh.us/grid.svgwidth =241height =401/> 
  

结果



请注意，对于此特定网格，您必须使用如果你希望网格开始，那么形式为 nx 80 + 1 （带有 n 为任意整数）的宽度和高度并以一个粗的中风结束。

I want to draw a grid as shown in image but I totally don't have idea that where should I begin. Should I use SVG or should I use Canvas with HTML5 and how to draw it.
Please guide on this. I want this grid to draw rectangle, circle or other diagrams on it and I will calculate area of that diagram like area of square.

解决方案

SVG can do this nicely using patterns:

<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>

I set width and height to 100%, so you can define the actual width and height on use, either for inline 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>

or an <img> element:

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

results in:

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

results in

Note that for this particular grid you have to use widths and heights of the form n x 80 + 1 (with n being any integer) if you want the grid to start and end with a thick stroke.

这篇关于如何使用html5和（canvas或svg）绘制网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！