绘图画布

我想达到以下内点的预定数量： -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

回答

相关问题