个人中心
gpt4 book ai didi

javascript - 我的网格制作器中的错误

转载 作者：行者123 更新时间：2023-12-02 17:02:17 25 4
gpt4 key购买 nike

我已经使用 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();

  }

}

当我增加网格中的图 block 数量时，它工作正常，但当我减少它时，它不会改变任何东西。

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

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

最佳答案

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

beginPath 声明您正在开始一组新的路径绘制命令(如 moveTo、lineTo)。

如果没有 beginPath，每次调用 context.lines 时都会重新绘制之前的每个绘制命令。

这意味着您的较大网格始终会被绘制，从而掩盖您想要的较小网格。

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();

    }

}

关于javascript - 我的网格制作器中的错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25588691/

25 4 0
文章推荐： javascript - 将视频轨道 src 替换为变量
文章推荐： symfony - 如何避免工厂模型中的服务容器
文章推荐： javafx - fxml 包括其他 fxml 文件和用户定义的属性
文章推荐： clojure - cond-> 具有多个值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com