Javascript 如何将数组放置在循环的多个圆上？_Javascript_Html

Javascript 如何将数组放置在循环的多个圆上？

javascript html

Javascript 如何将数组放置在循环的多个圆上？,javascript,html,Javascript,Html,我试着用for画出多个圆圈。它可以工作，但现在我想把数组放在“for”部分函数绘制圆（圆、圆、半径、填充）{ context.fillStyle=“黑色”； fillRect（0,0800300）； context.strokeStyle=“红色”； strokeRect（5,5790290）； context.fillStyle=fill；弧（圆，圆，半径，0，数学π*2）； context.fill（）； } 函数draw_multiple（）{ var i； var circles=[

我试着用for画出多个圆圈。它可以工作，但现在我想把数组放在“for”部分

函数绘制圆（圆、圆、半径、填充）{
context.fillStyle=“黑色”；
fillRect（0,0800300）；
context.strokeStyle=“红色”；
strokeRect（5,5790290）；
context.fillStyle=fill；
弧（圆，圆，半径，0，数学π*2）；
context.fill（）；
}
函数draw_multiple（）{
var i；
var circles=[]；//如何放置数组，以便此代码可以使用数组？
对于（i=0；i<10；i++）{
画一个圆（（i*70）+100100,30，“青色”）；
}
}
画多个（）；

我想您应该调用draw\u circle来表示多个圆，而圆的信息将在数组中。如果是这种情况，请检查下面的代码段：

在这里，我们创建了一个circle类，该类将保存所有属性，如原点、半径、填充颜色等。我们可以创建该类的实例，并将它们添加到数组中以创建circles集合。我们在circle类中还有一个draw方法，以便circle可以自己绘制。现在，在我们的drawCircles方法中，我们在集合中添加了圆，并在圆构造函数中传递了参数。现在，我们可以对集合中的所有对象调用draw方法。您还可以根据何时需要执行这些操作（例如，在页面加载时或在某些ajax调用中，您已获得圆圈信息）来分离对象创建和绘图逻辑。然后，您可以将它们添加到集合中，可以是Singleton集合，也可以是global集合，具体取决于您希望如何管理事物。但我不建议使用全局变量。然后，您可以将drawCircle方法与一些控制事件相关联，如按钮单击等

<html>
<head>
<script>

//my circle class
var Circle = function(circleX, circleY, radius, color){

    this.circleX = circleX;
    this.circleY = circleY;
    this.radius = radius;
    this.color = color;

    this.draw = function(canvasId){
        var c = document.getElementById(canvasId);
        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.strokeStyle = this.color;
        ctx.arc(this.circleX, this.circleY, this.radius, 0, 2 * Math.PI);
        ctx.stroke();
    };
};


//my onclick draw function
function drawCenterdCircles(){        
    var circles = [];

    circles.push(new Circle(100,75,50,"black"));
    circles.push(new Circle(100,75,55,"red"));
    circles.push(new Circle(100,75,60,"green"));
    circles.push(new Circle(100,75,65,"yellow"));
    //add more circles
    for(var i = 0; i < circles.length; i++){
        circles[i].draw("centerdCircles");   
    }    
}

function drawSeparatedCircles(){        
    var circles = [];

    circles.push(new Circle(100,75,50,"black"));
    circles.push(new Circle(205,75,50,"red"));
    circles.push(new Circle(310,75,50,"green"));
    circles.push(new Circle(415,75,50,"yellow"));
    //add more circles
    for(var i = 0; i < circles.length; i++){
        circles[i].draw("separateCircles");   
    }    
}

</script>
</head>
<body>

<canvas id="centerdCircles" width="600" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<br>
<input type="button" value="Draw Centerd Circles" onclick="drawCenterdCircles();"/>
<br>
<canvas id="separateCircles" width="600" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<br>

<input type="button" value="Draw Separated Circles" onclick="drawSeparatedCircles();"/>
</body>
</html>


//我的圆圈课
变量圆=函数（圆、圆、半径、颜色）{
this.circleX=circleX；
this.circleY=circleY；
这个半径=半径；
这个颜色=颜色；
this.draw=函数（canvasId）{
var c=document.getElementById（canvasId）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.strokeStyle=this.color；
ctx.arc（this.circleX，this.circleY，this.radius，0,2*Math.PI）；
ctx.stroke（）；
};
};
//我的onclick绘图函数
函数drawCenterdCircles（）{
var循环=[]；
圆圈。推（新圆圈（100,75,50，“黑色”）；
圆圈。推（新圆圈（100,75,55，“红色”）；
圆圈。推（新圆圈（100,75,60，“绿色”）；
圆圈。推（新圆圈（100,75,65，“黄色”）；
//添加更多圆圈
对于（变量i=0；i


您的浏览器不支持HTML5画布标记。

-1，这不是一个很清楚的问题。你想在数组中放入什么？首先，对不起，我之前的问题不好。我想在水平线上画10个圆，每个圆用数组画。对于第一个圆坐标、半径和填充，我用draw_circle函数调用它们。循环中第二个第十个圆的X坐标。所以圆圈会像这样->哦哦。谢谢您，很抱歉拼写不正确。是否要在循环中创建圆（上面）的实例？你想在它们之间增加特定的距离，对吗？是的，类似的。我不知道如何为我的每个圆放置数组。检查更新的代码！！！非常感谢Anuj Yadav，你帮了我很多：）。我将一部分一部分地学习这段代码，尤其是数组部分！非常感谢。

<html>
<head>
<script>

//my circle class
var Circle = function(circleX, circleY, radius, color){

    this.circleX = circleX;
    this.circleY = circleY;
    this.radius = radius;
    this.color = color;

    this.draw = function(canvasId){
        var c = document.getElementById(canvasId);
        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.strokeStyle = this.color;
        ctx.arc(this.circleX, this.circleY, this.radius, 0, 2 * Math.PI);
        ctx.stroke();
    };
};


//my onclick draw function
function drawCenterdCircles(){        
    var circles = [];

    circles.push(new Circle(100,75,50,"black"));
    circles.push(new Circle(100,75,55,"red"));
    circles.push(new Circle(100,75,60,"green"));
    circles.push(new Circle(100,75,65,"yellow"));
    //add more circles
    for(var i = 0; i < circles.length; i++){
        circles[i].draw("centerdCircles");   
    }    
}

function drawSeparatedCircles(){        
    var circles = [];

    circles.push(new Circle(100,75,50,"black"));
    circles.push(new Circle(205,75,50,"red"));
    circles.push(new Circle(310,75,50,"green"));
    circles.push(new Circle(415,75,50,"yellow"));
    //add more circles
    for(var i = 0; i < circles.length; i++){
        circles[i].draw("separateCircles");   
    }    
}

</script>
</head>
<body>

<canvas id="centerdCircles" width="600" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<br>
<input type="button" value="Draw Centerd Circles" onclick="drawCenterdCircles();"/>
<br>
<canvas id="separateCircles" width="600" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<br>

<input type="button" value="Draw Separated Circles" onclick="drawSeparatedCircles();"/>
</body>
</html>