繪圖畫布

我想達到以下內點的預定數量： -Given兩個變量numberColumns/numberRows我要繪製矩形或點的網格，設置寬度帆布例如800x400繪圖畫布

我有試了好東西，但我在用正確的間距

這讓矩形/點大小合適的失敗是我極力把一個行的例子。我試圖讓對行/列

function draw(){ 
      var width = 800; 
      var height = 400; 

      var nrow = 32; 
      var ncol = 48; 

      var canvas = document.getElementById('tutorial'); 
      if (canvas.getContext){ 
       var ctx = canvas.getContext('2d'); 
       //Have a border so drawing starts at 20,20 
       var spacew = width - 40; 
       var x = Math.floor(spacew/ncol); 

       var currCol = 20; 
       for(i = 1; i<ncol; i++){ 
        ctx.beginPath(); 
        ctx.arc(currCol, 20, x, 0, Math.PI*2, true); 
        ctx.closePath(); 
        ctx.fill(); 

        currCol = currCol + x*2; 
       } 

      } 
     }

，我怎麼會去這一點，也許一個例子任何想法的任何給定數量的工作嗎？

感謝

來源

2012-09-21 by0

我已經創建了一個例子這裏http://jsfiddle.net/J9MLq/7/。每個圓的直徑爲2*radius。我已經把它計算半徑時，動態地根據在畫布上的var x = width/ncol/2;寬度（你不需要任何Math.floor/Math.ceil，否則就會有圓之間的差距，也邊框）。此外，現在canvas元素可調整大小，您的函數接受參數draw(width, height)。現在你可以自己玩排。您可以擴展該函數以接受行和列的數量。只是嘗試有...

來源

2012-09-21 15:39:04 alekperos

由於它的工作。有時點圓弧會被切斷/點之間有空格。有沒有辦法解決？ http://jsfiddle.net/J9MLq/8/ – by0

問題所在的座標currCol和currRow內，因爲計算的結果是一小部分，並且在拉伸過程中，因此一些固定迭代之後可以觀察圓等的重疊此[http://jsfiddle.net/J9MLq/12/](http://jsfiddle.net/J9MLq/12/）是其中圓圈按比例繪製之間的行/列增加所述給定寬度/高度和空間的示例分別。二[例子 - http://jsfiddle.net/J9MLq/11/](http://jsfiddle.net/J9MLq/11/）具有圓之間沒有間隙，但它們的半徑成正比的寬度和高度在一起。 – alekperos

我希望上面的例子會給你選擇使用的數學函數座標玩。 – alekperos

回答

相關問題