0

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

            }
        }

关于我将如何解决这个问题的任何想法，也许是一个例子？

谢谢

4

1 回答 1

1

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

于 2012-09-21T15:39:04.767 回答