Блог

Главная - Вопросы по программированию - Canvas grid не будет отображаться должным образом

Canvas grid не будет отображаться должным образом

#javascript #html #canvas #html5-canvas

#javascript #HTML #холст #html5-canvas

Вопрос:

У меня есть некоторый код, который позволяет мне рисовать сетку на холсте с таким количеством строк, сколько вам нравится. Единственная проблема заключается в том, что всякий раз, когда я пытаюсь отобразить 25 или более строк — горизонтальных или вертикальных — некоторые, если не большинство строк, даже не отображаются. (Это легко заметить, когда есть 40 или более строк.) Количество отображаемых строк может отличаться на разных устройствах или браузерах — я еще не полностью проверил.

Вот код, который я использую: 

 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 = Math.round(w / hlines);
    let y = Math.round(h / vlines);
    ctx.beginPath();
    for (var i=0; i<x; i  ) {
        ctx.moveTo(x * (i   1), 0);
        ctx.lineTo(x * (i   1), h);
    }
    for (var i=0; i<y; 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, 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>

Я чувствую, что есть ограничение на функцию, которую я использую… Есть ли способ исправить это?

Ответ №1:

Похоже, математика в 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, 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>