Question

如何绘制与此代码水平对齐的多个圆圈？我试过一个循环但无济于事。

 <!doctype html>
    <html>
    <head>

        <title> Draw circle </title>

    <body>
    <canvas id="myCanvas" width="500" height="300" style="border:solid 2px white;">
    </canvas>
    <script>

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    function draw_circle (circleX, circleY, radius, fill) { 
        context.fillStyle = "black";
        context.fillRect(0, 0, 500, 300);

        context.strokeStyle = "red";
        context.strokeRect(5, 5, 490, 290);

        context.fillStyle = fill;
        context.arc(circleX, circleY, radius, 0, Math.PI*2);
        context.fill();
    }

    draw_circle(100, 100, 30 , "cyan");
    </script>
    </body>
    </html>

Answer 1

<canvas id="myCanvas" width="500" height="300" style="border:solid 2px white;">
    </canvas>
    <script>

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    function drawWindow(){
        context.fillStyle = "black";
        context.fillRect(0, 0, 500, 300);

        context.strokeStyle = "red";
        context.strokeRect(5, 5, 490, 290);

    }
    function draw_circle (circleX, circleY, radius, fill) { 

        context.fillStyle = fill;
        context.arc(circleX, circleY, radius, 0, Math.PI*2);
        context.fill();
    }
    drawWindow();
    for(var i = 0; i <= 3 ; i++){
        draw_circle((i*60)+100,100, 30 , "cyan");
    }

    </script>

水平绘制多个圆圈HTML5

1 个答案: