0

私は次のことを達成しようとしています:

いくつかのことを試しましたが、長方形/ドットを適切なサイズで適切な間隔で取得できませんでした

これは、1行を描画しようとした例です。指定された数の行/列で作業を開始しようとしています

    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/。各円の直径は です2*radius。キャンバスの幅に応じて半径を動的に計算するときに入れましたvar x = width/ncol/2;（Math.floor/Math.ceilは必要ありません。そうしないと、円と境界線の間にギャップができます）。また、canvas 要素のサイズを変更できるようになりました。関数は parameters を受け入れますdraw(width, height)。これで、自分で行を操作できます。関数を拡張して、行と列の量も受け入れることができます。そこで試してみてください...

于 2012-09-21T15:39:04.767 に答える