Javascript 在HTML5中水平绘制多个圆_Javascript_Html

Javascript 在HTML5中水平绘制多个圆

javascript html

Javascript 在HTML5中水平绘制多个圆,javascript,html,Javascript,Html,如何绘制多个与此代码水平对齐的圆？我试过打圈，但没用 <!doctype html> <html> <head> <title> Draw circle </title> <body> <canvas id="myCanvas" width="500" height="300" style="border:solid 2px white;"> <

如何绘制多个与此代码水平对齐的圆？我试过打圈，但没用

 <!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>


画圈
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
函数绘制圆（圆、圆、半径、填充）{
context.fillStyle=“黑色”；
fillRect（0,0500300）；
context.strokeStyle=“红色”；
strokeRect（5,5490290）；
context.fillStyle=fill；
弧（圆，圆，半径，0，数学π*2）；
context.fill（）；
}
画一个圆圈（100，100，30，“青色”）；


var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
函数drawWindow（）{
context.fillStyle=“黑色”；
fillRect（0,0500300）；
context.strokeStyle=“红色”；
strokeRect（5,5490290）；
}
函数绘制圆（圆、圆、半径、填充）{
context.fillStyle=fill；
弧（圆，圆，半径，0，数学π*2）；
context.fill（）；
}
拉窗（）；
对于（var i=0；i您的draw_circle函数每次调用时都会用黑色填充画布。您应该只运行该代码一次。明白了，感谢您的更正：）感谢您的回答，并发布用户3087839，它可以工作：）
<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>