我的网格生成器出现错误

Bug in my grid maker

本文关键字：错误 网格生成 我的      更新时间：2023-09-26

我已经用canvas创建了一个网格生成器，到目前为止我已经有了这个：

<-- HTML -->
<body>
    <canvas id="tileMap"></canvas>
    <form action="#">
        <input type="range" max=5 min=1 name="numberOfTilesInLineAndColunm" id="numberOfTilesInLineAndColunm">
    <script src="js.js"></script>
    </form>
</body>
<-- JAVASCRIPT -->
window.onload = function() { 
    var grid  = new Grid();
    var input = document.getElementById('numberOfTilesInLineAndColunm');
    canvas  = document.getElementById("tileMap");
    context = canvas.getContext("2d");
    canvas.width  = 300;
    canvas.height = canvas.width;
    //printGrid(grid.getGridBeginning(), grid.getGridSize(), grid.getTileSize());
    input.addEventListener('change', function() {
        grid.setNumberOfTilesInLineAndColunm();
        grid.setGridSize();
        printGrid(grid.getGridBeginning(), grid.getGridSize(), grid.getTileSize());
    });
}
var canvas;
var context;
function Grid() {
    var gridBeginning                = 0; 
    var tileSize                     = 32;
    var numberOfTilesInLineAndColunm = document.getElementById('numberOfTilesInLineAndColunm').value;
    var gridSize                     = (numberOfTilesInLineAndColunm * tileSize);
    var width                        = 0;
    var height                       = 0;
    this.getNumberOfTilesInLineAndColunm = function() {
        return numberOfTilesInLineAndColunm;
    }
    this.setNumberOfTilesInLineAndColunm = function() {
        numberOfTilesInLineAndColunm = document.getElementById('numberOfTilesInLineAndColunm').value;
    }
    this.getGridBeginning = function() {
        return gridBeginning;
    }
    this.getTileSize = function() {
        return tileSize;
    }
    this.getGridSize = function() {
        return gridSize;
    }
    this.setGridSize = function() {
        gridSize = (numberOfTilesInLineAndColunm * tileSize);
    }
}
function printGrid(beginning, gridSize, squareSize) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  for (beginning; beginning <= gridSize; beginning += squareSize) {
    // printing the horizontal lines
    context.moveTo(beginning, 0);
    context.lineTo(beginning, gridSize);
    context.stroke();
    // printing the vertical lines
    context.moveTo(0, beginning);
    context.lineTo(gridSize, beginning);
    context.stroke();
  }
}

当我增加网格中瓷砖的数量时，它工作得很好，但当我减少时，它不会改变任何东西。

这是jsfiddle：http://jsfiddle.net/p54emnmg/

我请求你帮忙调试这个东西，因为到目前为止我真的不知道错误在哪里。

您必须在printGrid函数中执行context.beginPath()。

beginPath声明您正在启动一组新的路径绘制命令（如moveTo、lineTo）。

在没有beginPath的情况下，每次调用context.sstroke.时，都会重新绘制以前的每个绘图命令

这意味着总是绘制较大的网格，从而遮挡所需的较小网格。

function printGrid(beginning, gridSize, squareSize) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    // do context.beginPath();
    // This starts a new path
    // Without it, every previous drawing command is redrawn
    context.beginPath();
    for (beginning; beginning <= gridSize; beginning += squareSize) {
        // printing the horizontal lines
        context.moveTo(beginning, 0);
        context.lineTo(beginning, gridSize);
        context.stroke();
        // printing the vertical lines
        context.moveTo(0, beginning);
        context.lineTo(gridSize, beginning);
        context.stroke();
    }
}
相关文章：