HTML畫布 - 在一個循環中繪製多個矩形

Question

正在處理計算一張紙的數量的項目。 我想使用HTML畫布顯示結果。

到目前爲止，我可以通過畫布大小設置圖紙大小，也可以通過矩形設置圖塊大小。這些設置來自文本框＃a0，＃a1，＃c &＃d。

我在繪製畫布內的矩形的結果之後。以下是代碼，我到目前爲止，但沒有工作...

function drawShapes(){ 
var canvas = document.getElementById('mycanvas'); 
canvas.width = (document.piecesForm.a0.value) /3; 
canvas.height = (document.piecesForm.a1.value) /3; 

var pieceWidth = (document.getElementById('c').value)/3; 
var pieceHeight = (document.getElementById('d').value)/3; 

var numAcross = canvas.width/pieceWidth; 
var numDown = canvas.height/pieceHeight; 

// Make sure we don't execute when canvas isn't supported 
if (canvas.getContext){ 

    // use getContext to use the canvas for drawing 
var ctx = canvas.getContext('2d'); 

for(i = 0; i < numAcross; i++){ 
    ctx.lineWidth = 1; 
    ctx.beginPath(); 
    ctx.strokeRect(0,0,pieceWidth,pieceHeight); 
    ctx.moveTo(i*pieceWidth,0); 
} 
} 
} 

這將需要另外一個循環來顯示件數下，任何幫助將是巨大的

Answer 1

我更新了你的代碼，它現在的作品：

http://jsfiddle.net/gamealchemist/2cKm3/5/

var sheetSetup = { 
    layout: { 
     flipped: false, 
     piecePerRow: 0, 
     piecePerLine: 0 
    }, 
    sheet: { 
     sizeX: 0, 
     sizeY: 0 
    }, 
    piece: { 
     sizeX: 0, 
     sizeY: 0 
    } 
}; 


function getSheetSizeX() { 
    return parseInt(document.piecesForm.a0.value); 
} 

function getSheetSizeY() { 
    return parseInt(document.piecesForm.a1.value); 
} 

function getfinalSizeX() { 
    return parseInt(document.piecesForm.c.value); 
} 

function getfinalSizeY() { 
    return parseInt(document.piecesForm.d.value); 
} 

function postMessage(dst, msg) { 
    document.getElementById(dst).innerHTML = msg; 
} 

function piecesCalc() { 

    var error = false; 

    // If the value of the sheet size textboxes is empty, then show an alert 
    if (!getSheetSizeX() || !getSheetSizeY()) { 
     postMessage("message1", "Sheet Size can't be empty!"); 
     document.piecesForm.a0.focus(); 
     error = true; 
    } else { 
     postMessage("message1", ""); 
    } 

    // If the value of the final size textboxes is empty, then show an alert 
    if (!getfinalSizeX() || !getfinalSizeY()) { 
     postMessage("message2", "Final Size can't be empty!"); 
     document.piecesForm.c.focus(); 
     error = true; 
    } else { 
     postMessage("message2", ""); 
    } 

    if (error) { 
     postMessage("answer", "---"); 
     return; 
    } 

    var total1 = Math.floor(getSheetSizeX()/getfinalSizeX()) * Math.floor(getSheetSizeY()/getfinalSizeY()); 

    var total2 = Math.floor(getSheetSizeY()/getfinalSizeX()) * Math.floor(getSheetSizeX()/getfinalSizeY()); 

    if (total2 <= total1) { 
     sheetSetup.layout.flipped = false; 
     sheetSetup.layout.piecePerRow = Math.floor(getSheetSizeX()/getfinalSizeX()); 
     sheetSetup.layout.piecePerLine = Math.floor(getSheetSizeY()/getfinalSizeY()); 
    } else { 
     sheetSetup.layout.flipped = true; 
     sheetSetup.layout.piecePerRow = Math.floor(getSheetSizeY()/getfinalSizeX()); 
     sheetSetup.layout.piecePerLine = Math.floor(getSheetSizeX()/getfinalSizeY()); 
    } 
    sheetSetup.sheet.sizeX = getSheetSizeX(); 
    sheetSetup.sheet.sizeY = getSheetSizeY(); 
    sheetSetup.piece.sizeX = getfinalSizeX(); 
    sheetSetup.piece.sizeY = getfinalSizeY(); 

    var total = Math.max(total1, total2); 
    postMessage("answer", total + " per sheet"); 
    // document.piecesForm.nbpieces.value = total; 
} 

function drawShapes() { 
    console.log(sheetSetup); 

    var displayRatio = 5; 
    // get the canvas element using the DOM 
    var canvas = document.getElementById('mycanvas'); 
    canvas.width = Math.floor(sheetSetup.sheet.sizeX/displayRatio); 
    canvas.height = Math.floor(sheetSetup.sheet.sizeY/displayRatio); 

    // Make sure we don't execute when canvas isn't supported 
    if (canvas.getContext) { 

     // use getContext to use the canvas for drawing 
     var ctx = canvas.getContext('2d'); 

     var usedWidth = sheetSetup.layout.flipped ? sheetSetup.piece.sizeY : sheetSetup.piece.sizeX; 
     var usedHeight = sheetSetup.layout.flipped ? sheetSetup.piece.sizeX : sheetSetup.piece.sizeY; 

     usedWidth /= displayRatio; 
     usedHeight /= displayRatio; 

     for (var line = 0; line < sheetSetup.layout.piecePerLine; line++) { 
      for (var row = 0; row < sheetSetup.layout.piecePerRow; row++) { 
       ctx.strokeRect(row * usedWidth, line * usedHeight, usedWidth, usedHeight); 
      } 
     } 
    } 
} 

Answer 2

讓

var total=0 as Global variable 

該代碼是

for (i = 0; i < numAcross; i++) { 
     ctx.lineWidth = 1; 
     ctx.beginPath(); 
     ctx.strokeRect(i*pieceWidth, 0, pieceWidth, pieceHeight); 
     ctx.moveTo(i * pieceWidth, 5); 
    } 
    for (i = 0; i < total-numAcross; i++) { 
     ctx.lineWidth = 1; 
     ctx.beginPath(); 
     ctx.strokeRect(i*pieceWidth, pieceHeight, pieceWidth, pieceHeight); 
     ctx.moveTo(i * pieceWidth, 5); 
    } 

小提琴：