问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何使用 HTML5 和画布或 SVG 绘制网格

社区维基
1
新手上路，请多包涵

我想绘制如图所示的网格，但我完全不知道从哪里开始。

我应该使用 SVG 还是应该使用带有 HTML5 的 Canvas 以及如何在上面绘图？

我希望此网格在其上绘制矩形、圆形或其他图表，我将计算该图表的面积，就像计算正方形的面积一样。

网格

原文由 Sandeep Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlsvghtml5-canvas
阅读 555
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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://svgshare.com/i/eGa.svg" width="700" height="200"/>

结果是：

（抱歉，如果图像没有显示——似乎没有像 Imgur 这样可靠地托管 SVG 的东西。）

 <img src="https://svgshare.com/i/eGa.svg" width="241" height="401"/>

结果是

请注意，对于此特定网格，如果您希望网格以粗笔画开始和结束，则必须使用 n x 80 + 1 形式的宽度和高度（其中 n 是任何整数）。

原文由 Thomas W 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

我在 SO 上使用 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 重复背景图像，如此处的小提琴 所示。这对页面性能也有好处。

原文由 Tanzeel Kazi 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题