如何使用 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"><定义><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 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"/></模式></defs><rect width="100%" height="100%" fill="url(#grid)"/></svg>

我将 width 和 height 设置为 100%，因此您可以定义实际使用的宽度和高度，无论是用于内联 SVG:

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><定义><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 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"/></模式></defs><rect width="100%" height="100%" fill="url(#grid)"/></svg>

或 元素:

结果:

结果

请注意，对于这个特定的网格，如果您希望网格能够以粗笔画开始和结束.

I want to draw a grid as shown in the image but I totally don't have any idea where to begin.

Should I use SVG or should I use Canvas with HTML5 and how do I draw on it?

I want this grid to draw rectangle, circle or other diagrams on it and I will calculate the area of that diagram like area of a 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://svgshare.com/i/9Eo.svg" width="700" height="200"/>

results in:

<img src="https://svgshare.com/i/9Eo.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屋！