画布网格无法正确渲染

如何解决画布网格无法正确渲染

我有一些代码可以让我在画布上绘制任意数量的网格。唯一的问题是，每当我尝试渲染25条或更多线条（无论是水平线条还是垂直线条）时，即使没有，大多数线条甚至都不会渲染。（当有40条或更多行时，很容易观察到。）呈现的行数可能会因设备或浏览器而异-我尚未完全验证。

这是我正在使用的代码：

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    color: #fff;
    text-align: center;
}
div {
    background: #999;
    position: fixed;
    top: 0;
    right: 0;
    max-width: 20%;
    height: 20px;
    padding: 7px;
    overflow: hidden;
    transition: 0.5s;
}
button {
    border: none;
    background: #999;
    cursor: pointer;
    transition: 0.5s;
}
button:hover {
    background: #aaa;
}

<!doctype html>
<html>
<head>
<title>Canvas Test</title>
</head>
<body>
<canvas id="canvasandcrap" width="1000" height="600" style="background:#eee"></canvas>
<div>
<button onclick="toggleControls()">Open Controls</button>
<p>Horizontal Lines</p>
<input type="range" id="hl" min="1" max="30" oninput="inputLol()">
<p>Vertical Lines</p>
<input type="range" id="vl" min="1" max="30" oninput="inputLol()">
</div>
</body>
</html>

http.sessionManagement()
            .sessionCreationPolicy(SessionCreationPolicy.STATELESS);

我觉得我正在使用的功能有限制... 有办法解决这个问题吗？

解决方法

看起来function createGrid()中的数学不太正确

看看下面的代码：
我假设您的控件的值确定行数

function gID(id) {return document.getElementById(id);}
function gTag(tag) {return document.getElementsByTagName(tag);}
var canvas = gID("canvasandcrap");
var ctx = canvas.getContext("2d");
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
var w = canvas.width,h = canvas.height;
var currenth = 15,currentv = 15;

function createGrid() {
    let hlines = currenth;
    let vlines = currentv;

    let x = (w / hlines);
    let y = (h / vlines);    
    
    ctx.beginPath();
    for (var i=0; i<hlines; i++) {
        ctx.moveTo(x * (i + 1),0);
        ctx.lineTo(x * (i + 1),h);        
    }
    
    for (var i=0; i<vlines; i++) {
        ctx.moveTo(0,y * (i + 1));
        ctx.lineTo(w,y * (i + 1));
    }
    ctx.stroke();
}
function inputLol() {
    currenth = Number(gID("hl").value);
    currentv = Number(gID("vl").value);    
    ctx.clearRect(0,w,h);
    createGrid();
}
createGrid();

var controlsAreOpen = false;
function toggleControls() {
    if (controlsAreOpen) {
        gTag("div")[0].style.height = "20px";
        gTag("button")[0].innerHTML = "Open Controls";
        controlsAreOpen = false;
    } else {
        gTag("div")[0].style.height = "200px";
        gTag("button")[0].innerHTML = "Close Controls";
        controlsAreOpen = true;
    }
}

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    color: #fff;
    text-align: center;
}
div {
    background: #999;
    position: fixed;
    top: 0;
    right: 0;
    max-width: 20%;
    height: 20px;
    padding: 7px;
    overflow: hidden;
    transition: 0.5s;
}
button {
    border: none;
    background: #999;
    cursor: pointer;
    transition: 0.5s;
}
button:hover {
    background: #aaa;
}

<!doctype html>
<html>
<head>
<title>Canvas Test</title>
</head>
<body>
<canvas id="canvasandcrap" width="1000" height="600" style="background:#eee"></canvas>
<div>
<button onclick="toggleControls()">Open Controls</button>
<p>Horizontal Lines</p>
<input type="range" id="hl" min="1" max="30" oninput="inputLol()">
<p>Vertical Lines</p>
<input type="range" id="vl" min="1" max="30" oninput="inputLol()">
</div>
</body>
</html>