我想在畫布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]「沿着圓的周長s到畫點，你可以計算一套desiredRadianAngleOnCircle的是這樣的：

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

：

// 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畫點

示例代碼和演示：

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>