How to get an array of coordinates that make up a circle in canvas?

后端 未结 2 1543
半阙折子戏
半阙折子戏 2021-01-19 06:38

So, if this is the code I\'m using to draw a circle on my canvas:

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.lineWidth =          


        
相关标签:
2条回答
  • 2021-01-19 07:02

    @Octopus is on the right track:

    var centerX=100;
    var centerY=100;
    var radius=40;
    
    // an array to save your points
    var points=[];
    
    for(var degree=0;degree<360;degree++){
        var radians = degree * Math.PI/180;
        var x = centerX + radius * Math.cos(radians);
        var y = centerY + radius * Math.sin(radians);
        points.push({x:x,y:y});
    }
    

    Then you can draw the circle using the point objects in the points array:

    ctx.beginPath();
    ctx.moveTo(points[0].x,points[0].y);
    for(var i=1;i<points.length;i++){
        ctx.lineTo(points[i].x,points[i].y);
    }
    ctx.closePath();
    ctx.fillStyle="skyblue";
    ctx.fill();
    ctx.strokeStyle="lightgray";
    ctx.lineWidth=3;
    ctx.stroke()
    

    A suggestion, however...

    Instead of saving all the points in the database, just save the centerX/Y and radius in the database.

    Then you can use this same math to create the points and draw the circle.

    0 讨论(0)
  • 2021-01-19 07:06

    You are asking for the formula for a circle which is:

    radius*radius = (x-centerX)*(x-centerX) + (y-centerY)*(y-centerY)
    

    Or if you want to generate n points do something like this:

    for (i=0;i<n;i++) {
        x[i] = centerX + radius* Math.cos( (i*2*Math.PI)/n );
        y[i] = centerY + radius*-Math.sin( (i*2*Math.PI)/n );
    }
    
    0 讨论(0)
提交回复
热议问题