我想要 canvas ctx.fillText(".",500,400) 中的虚线圆圈

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：

// 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();

示例代码和演示：

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();
    
}

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

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

我想要 canvas ctx.fillText(".",500,400) 中的虚线圆圈

i want a dotted circle in canvas ctx.fillText(".",500,400)

javascript

canvas

html5-canvas