Question

我想制作一个虚线圆圈

var c = document.getElementById("layerCanvas");
        var ctx = c.getContext("2d");
        ctx.font = "15px Arial";
        ctx.fillStyle = "white";

        ctx.fillText(".",500,400);

我如何使用ctx.arc来执行此操作？

Answer 1

您可以使用context.arc和一些三角函数在圆周的任意点绘制一个点。

您可以使用以下方法计算圆周长上任意角度的点：

var x=centerX+radius*Math.cos(desiredRadianAngleOnCircle);
var y=centerY+radius*Math.sin(desiredRadianAngleOnCircle);

如果你想沿着圆周的间隔[x，y]来绘制点，你可以像这样计算一组desiredRadianAngleOnCircle：< / p>

// calc the interval to draw 60 dots around the circle
var interval=(Math.PI*2)/60;   

// increament desiredRadianAngleOnCircle for each new x,y
desiredRadianAngleOnCircle += interval;

你可以使用填充的context.arc：

绘制一个点

 context.beginPath();
 context.arc(x,y,3,0,Math.PI*2);
 context.closePath();
 context.fill();

示例代码和演示：

＆＃13;

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

var dotsPerCircle=60;

var interval=(Math.PI*2)/dotsPerCircle;   

var centerX=150;
var centerY=150;
var radius=100;

for(var i=0;i<dotsPerCircle;i++){

    desiredRadianAngleOnCircle = interval*i;
    
    var x = centerX+radius*Math.cos(desiredRadianAngleOnCircle);
    var y = centerY+radius*Math.sin(desiredRadianAngleOnCircle);

     context.beginPath();
     context.arc(x,y,3,0,Math.PI*2);
     context.closePath();
     context.fill();
    
}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red; }

＆＃13;

<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

我想要一个画布上的虚线圆圈ctx.fillText（“。”，500,400）

1 个答案: