Javascript 在画布中绘制预定义数量的点

我正在努力实现以下目标： -给定两个变量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;
                }

            }
        }

函数绘图（）{
var宽度=800；
var高度=400；
var nrow=32；
var-ncol=48；
var canvas=document.getElementById（'tutorial'）；
if（canvas.getContext）{
var ctx=canvas.getContext（'2d'）；
//有一个边框，这样绘图从20,20开始
var spacew=宽度-40；
var x=数学楼层（带ncol的空间）；
var-currCol=20；
对于（i=1；i我在这里创建了一个示例。每个圆的直径都是
2*半径
。我在
var x=width/ncol/2；
中根据画布的宽度动态计算半径时使用了它（您不需要任何Math.floor/Math.ceil，否则圆和边框之间会有间隙）。此外，现在画布元素可以调整大小，您的函数接受参数
draw（宽度、高度）
。现在您可以自己玩这些行了。您可以扩展该函数以接受行和列的数量。只需在那里尝试一下…
谢谢它奏效了。有时点弧会被切断，尽管点之间有空格。是否有其他原因？问题出在坐标currCol和currRow内，因为计算结果是一个分数，在绘制过程中，因此经过一些固定的迭代后，您可以观察到圆的重叠等。这是一个示例，其中圆的绘制与给定的宽度/高度成比例，行/列之间的间距分别增加。第二，圆之间没有间隙，但其半径成比例我希望上面的例子能给你们提供使用数学函数处理坐标的选项。