javascript - 我想要在 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 和一些三 Angular 函数在圆圆周上的任意点绘制一个点。

您可以使用以下方法计算圆圆周上任意 Angular 点:

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>