如何使用html5和（画布或svg）绘制网格
我想画一个如图所示的网格，但我完全不知道从哪里开始。我应该使用SVG还是使用Canvas和HTML5以及如何绘制它。如何使用html5和（画布或svg）绘制网格,html,svg,html5-canvas,Html,Svg,Html5 Canvas,我想画一个如图所示的网格，但我完全不知道从哪里开始。我应该使用SVG还是使用Canvas和HTML5以及如何绘制它。 请对此进行指导。我希望这个网格在上面画矩形、圆形或其他图表，我会像计算正方形的面积一样计算图表的面积 我在这里使用canvas发布我的代码，但我也在JSFIDLE上创建了一个工作示例 堆垛溢流试验台 函数drawGrid（）{ var cnv=document.getElementById（“cnv”）； 变量gridOptions={ 米诺林：{ 分离：5， 颜色：“#00F
请对此进行指导。我希望这个网格在上面画矩形、圆形或其他图表，我会像计算正方形的面积一样计算图表的面积
我在这里使用
canvas
堆垛溢流试验台
函数drawGrid（）{
var cnv=document.getElementById（“cnv”）；
变量gridOptions={
米诺林：{
分离：5，
颜色：“#00FF00”
},
主要路线：{
离职人数：30人，
颜色：“#FF0000”
}
};
drawGridLines（cnv、gridOptions.minorLines）；
drawGridLines（cnv、gridOptions.Majorline）；
返回；
}
函数drawGridLines（cnv、lineOptions）{
var iWidth=cnv.宽度；
var iHeight=cnv高度；
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）；
对于（i=1；i，使用canvas非常容易，这是我的建议。我在手机上的响应速度很快，但即使下面的psuedocode不完全正确，您也应该明白这一点：
您将有一个类似以下内容的循环：
// "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();
}
/“Ctx”是您的画布上下文
//“宽度”、“高度”和其他以大写字母开头的变量是根据
//根据您的画布大小或偏好
var i；
对于（i=0；i
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>
或
结果：
<img src="https://svgshare.com/i/9Eo.svg" width="700" height="200"/>
导致
请注意，对于这个特定的网格，如果希望网格以粗笔划开始和结束，则必须使用格式nx80+1
（其中n
为任意整数）的宽度和高度。为了覆盖范围，基于CSS的方法如何
<img src="https://svgshare.com/i/9Eo.svg" width="241" height="401"/>
html{
身高：100%；
}
身体{
保证金：0；
填充：0；
身高：100%；
背景色：#434343；
背景尺寸：75px 75px；
背景图像：线性渐变（0度，透明24%，rgba（255，255，255，.05）25%，rgba（255，255，255，255，.05）26%，透明27%，透明74%，rgba（255，255，255，.05）75%，rgba（255，255，255，.05）76%，透明77%，透明，线性渐变（90度，透明24%，rgba（255，255，255，.05）25%，rgba（255，255，255，.05）26%，透明27%，透明74%，rgba（255，255，255，.05）75%，rgba（255，255，255，.05）76%，透明77%，透明；
}
帆布{
宽度：100%；
身高：100%；
位置：绝对位置；
背景色：透明；
背景尺寸：15px 15px；
背景图像：线性渐变（0度，透明24%，rgba（255，255，255，.05）25%，rgba（255，255，255，255，.05）26%，透明27%，透明74%，rgba（255，255，255，.05）75%，rgba（255，255，255，.05）76%，透明77%，透明，线性渐变（90度，透明24%，rgba（255，255，255，.05）25%，rgba（255，255，255，.05）26%，透明27%，透明74%，rgba（255，255，255，.05）75%，rgba（255，255，255，.05）76%，透明77%，透明；
}
你只想画一个网格？我不想沿着其他方向走，但我想知道你可以背景重复
一个小的网格图像来显示更大的网格。当然，如果你想根据计算绘制它，那么最好使用画布
。如果你需要一个更灵活的网格网格线之间的距离很宽，或者使用了什么颜色、笔划宽度和背景颜色，这也很容易做到。请随时询问您是否需要进一步的帮助。我非常喜欢这个解决方案。但是在firefox和safari中，如果svg拉伸得非常大（通过设置为：100%并使用非常小的视口）似乎存在舍入错误，导致小网格和大网格无法完美对齐：有没有办法解决此问题？增加笔划宽度时，它适用于细线（例如，尝试使用4.0），上显示了一些不对称问题。@ThomasW如何更改网格线的宽度？是否可以减少这些线上的笔划宽度？我尝试使用小于1的数字。在上面的SVG示例中效果很好，但我无法用此画布解决方案复制它的清晰性。您所指的清晰性是因为画布的宽度ders行。请参阅本文。还有一个更新的JSFIDLE供您使用
<img src="https://svgshare.com/i/9Eo.svg" width="700" height="200"/>
<img src="https://svgshare.com/i/9Eo.svg" width="241" height="401"/>
<!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>