錯誤在我的網商

我已經創建使用帆布網格製造商，到目前爲止，我有這樣的：錯誤在我的網商

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

    } 

}

它的正常工作，當我增加了網格小塊的數量，但是，當我降低它doesn什麼都不會改變。

這裏的的jsfiddle：http://jsfiddle.net/p54emnmg/

我問你的幫助調試這個東西COS到目前爲止，我真的不知道哪裏是錯誤的。

來源

2014-08-31 Bruno da Cruz

你必須在你的printGrid函數中做context.beginPath()。

beginPath聲明您正在開始一組新的路徑繪製命令（如moveTo，lineTo）。

如果沒有beginPath，每次調用context.stroke時都會重繪每個以前的繪圖命令。

這意味着你的大網格總是被繪製出來，它掩蓋了你想要的更小的網格。

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

    } 

}

來源

2014-08-31 03:43:10 markE

非常感謝！ – 2014-08-31 03:53:56

錯誤在我的網商

回答

相關問題