我已经使用 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/