HTML画布 - 在一个循环中绘制多个矩形

正在处理计算一张纸的数量的项目。我想使用HTML画布显示结果。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); 
} 
} 
}

这将需要另外一个循环来显示件数下，任何帮助将是巨大的

来源

2014-07-04 Meko6

什么 “不工作” 呢？考虑创建一个jsfiddle，以便我们可以看到你的代码在行动。 – zero298

我已经创建了一个jsfiddle - 感谢您的建议zero298 http://jsfiddle.net/MekoSix/2cKm3/ – Meko6

我更新了你的代码，它现在的作品：

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

来源

2014-07-04 12:37:05 GameAlchemist

让

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

小提琴：

来源

2014-07-04 11:09:12 Arunkumar

HTML画布 - 在一个循环中绘制多个矩形

回答

相关问题