如何使用 HTML5 和画布或 SVG 绘制网格
我想画一个如图所示的网格，但我完全不知道从哪里开始。
我应该使用 SVG 还是应该使用带有 HTML5 的 Canvas 以及如何使用它？
我希望这个网格在其上绘制矩形、圆形或其他图表，我将计算该图表的面积，就像正方形的面积一样。
https://i.stack.imgur.com/f6vGv.png
background-repeat一个小网格图像来显示较大的网格。当然，如果您想根据计算绘制它，那么您最好使用 canvas。
SVG 可以使用模式很好地做到这一点：
我将 width 和 height 设置为 100%，因此您可以定义使用时的实际宽度和高度，无论是对于内联 SVG：
或 <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 是任何整数）。
我在 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 参数使网格大小动态化。
但是，如果您的网格大小将是 static，我觉得 也许 您不需要 绘制 网格。只是为了向用户显示网格，您可以使用 CSS 重复背景图像，如小提琴 here 中所示。这对页面性能也有好处。
为了覆盖范围，基于 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>
使用画布很容易做到，这就是我推荐的。我在这里的移动设备上快速响应，但即使下面的伪代码不完全正确，您也应该明白这一点：
你会有一个类似的循环：
// "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();
}
基于 Ben Crowhurst 的示例，您也可以使用 repeating-linear-gradient 来做到这一点。这是我使用 css 的解决方案。我使用变量来让您了解什么做什么。
<!DOCTYPE html>
<html>
<head>
<style>
html {
height: 100%;
}
body {
--line-color: rgba(255 255 255 / .05);
--line-thickness: 1px;
--minor-length: 7.5px;
--major-length: 75px;
--line: var(--line-color) 0 var(--line-thickness);
--small-body: transparent var(--line-thickness) var(--minor-length);
--large-body: transparent var(--line-thickness) var(--major-length);
--small-squares: repeating-linear-gradient(
to bottom, var(--line), var(--small-body)
), repeating-linear-gradient(
to right, var(--line), var(--small-body)
);
--large-squares: repeating-linear-gradient(
to bottom, var(--line), var(--large-body)
), repeating-linear-gradient(
to right, var(--line), var(--large-body)
);
margin: 0;
padding: 0;
height: 100%;
background-color: #434343;
background-image: var(--small-squares), var(--large-squares);
}
</style>
</head>
<body>
</body>
</html>
您可以在 this fiddle of the css grid 中查看实时示例。
在 JavaScript 中创建 SVG
另一种方法是让 JavaScript 为您创建 SVG。我将展示如何创建一个由 SVG rectangles 组成的较小的 4x4 网格，以便您查看网格的详细信息：
首先，在 HTML 中添加一个表示网格的空 SVG，然后在 JavaScript 中用 SVG 矩形填充该网格：
让 grid = document.getElementById("svg_grid");让 startX = 5;让 startY = 5;让 rectWidth = 60;让 rectHeight = 60;让 nrOfColumns = 4;让 nrOfRows = 4;让水平填充 = 5;让verticalPadding = 5;让strokeWidth = 2;让 rectX = startX; for (let colIdx = 0; colIdx < nrOfColumns; colIdx++) { 让 rectY = startY; for (let rowIdx = 0; rowIdx < nrOfRows; rowIdx++) { 让 rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", rectX); rect.setAttribute("y", rectY); rect.setAttribute("宽度", rectWidth ); rect.setAttribute("高度", rectHeight); rect.setAttribute("style", "fill:blue;stroke:green;stroke-width:" + strokeWidth +";fill-opacity:0.1;stroke-opacity:0.6"); // 圆角 rect.setAttribute("rx", "3%"); rect.setAttribute("ry", "3%"); grid.appendChild(rect); rectY += rectHeight + 垂直填充； } rectX += rectWidth + HorizontalPadding; } // 调整网格大小以适应其包含的矩形 let svgWidth = startX + nrOfColumns * (horizontalPadding + rectWidth + strokeWidth);让 svgHeight = startY + nrOfRows * (verticalPadding + rectHeight + strokeWidth); grid.setAttribute("宽度", svgWidth); grid.setAttribute("高度", svgHeight);
如果您正在寻找 React/Javascript，我更喜欢使用 javascript 绘制自定义网格。
如果您想使其具有响应性，请相应地设置 rowCol 项目的高度和宽度。
var rowCols = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
var cols = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
var rowWidth = cols.length * 100// width of each row;
cols.map((item, index) => (
<div
key={item}
style={{
height: "100px",
outline: ".1px solid #E8E8E8",
outlineOffset: "-0.1px",
background: "white"
}}
>
{rowCols.map((i, idx) => (
<div
key={i}
style={{
width: "100px",
height: "100px",
display: "inline-block"
}}
></div>
))}
</div>
));
rowCols 有 15 个值，因为我们不需要渲染最后一个块，因为如果您定义了行的宽度，它会自动创建。就我而言，我们有 cols.length * 100
结果 = [1]：https://i.stack.imgur.com/qcy9T.png [2]：https://i.stack.imgur.com/UEkBW.png
8/80值更改为不同的值，您可以控制网格线之间的距离。