Question

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

            }
        }

关于我如何做到这一点的任何想法，也许是一个例子？

由于

Answer 1

我在这里创建了一个示例http://jsfiddle.net/J9MLq/7/。每个圆的直径为2*radius。我根据var x = width/ncol/2;中画布的宽度动态计算半径时放置它（你不需要任何Math.floor / Math.ceil，否则你的圆和边界之间会有间隙）。此外，现在canvas元素可以调整大小，您的函数接受参数draw(width, height)。现在你可以自己玩这些行了。您可以扩展函数以接受行数和列数。试试吧......

在画布内绘制预定义的点数

1 个答案: