在畫布中圓圈的一側邊框

Question

我已經在畫布中組合了圓弧創建了以下類型的圓圈。它被正確創建並且看起來不錯。

我的問題：

我身邊有弧形這是四面一黑色邊框。

我只想要在之外的邊框。我不想要區段之間的內部邊界或邊界。我嘗試了很多東西，但他們沒有奏效。

我曾嘗試以下：

ctx.beginPath(); 
ctx.moveTo(x1,y1); 
ctx.lineTo(x2,y2); 

但沒有成功。希望我能得到很好的解決方案。

我有3個相互連接的其他圈（FYI）。

var canvas = document.getElementById("canvas"); 
 

 
var startAngle = 0; 
 

 
var ctx; 
 
var canvas = document.getElementById("canvas"); 
 

 
var leftValue=250; 
 
var topValue=150; \t 
 

 
drawWheel1(); 
 

 
function drawWheel1() 
 
{ 
 
    \t if(canvas.getContext) 
 
\t { 
 
    \t var outsideRadius = 120; 
 
    \t var textRadius = 97; 
 
    \t var insideRadius = 80; 
 
\t \t var arc = Math.PI/6; 
 
\t 
 
    \t ctx = canvas.getContext("2d"); 
 
    
 
\t \t ctx.beginPath(); 
 
\t \t ctx.fillStyle="#3D3D3D"; 
 
    \t ctx.strokeStyle = "black"; 
 
    \t ctx.lineWidth = 5; 
 
\t \t 
 
    \t for(var i = 0; i < 12; i++) 
 
\t \t {  \t \t \t 
 
\t \t \t var angle = -(startAngle + i * arc); 
 
     \t \t ctx.fillStyle = "#029990"; 
 
     
 
     \t \t ctx.beginPath(); 
 
     \t \t ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false); 
 
     \t \t ctx.arc(leftValue, topValue, insideRadius, angle + arc, angle, true); 
 
\t \t \t ctx.stroke(); 
 
     \t \t ctx.fill(); 
 
     
 
     \t \t ctx.save(); 
 
     \t \t  \t \t 
 
     \t \t ctx.restore(); 
 
    \t }   \t 
 
    \t } 
 
}

<canvas id="canvas" width="500" height="580"></canvas>

Answer 1

建立一個新的路徑，只中風的新的像這樣。

var canvas = document.getElementById("canvas"); 
 

 
var startAngle = 0; 
 

 
var ctx; 
 
var canvas = document.getElementById("canvas"); 
 

 
var leftValue = 250; 
 
var topValue = 150; 
 

 
drawWheel1(); 
 

 
function drawWheel1() { 
 
if (canvas.getContext) { 
 
    var outsideRadius = 120; 
 
    var textRadius = 97; 
 
    var insideRadius = 80; 
 
    var arc = Math.PI/6; 
 

 
    ctx = canvas.getContext("2d"); 
 

 
    ctx.beginPath(); 
 
    ctx.fillStyle = "#3D3D3D"; 
 
    ctx.strokeStyle = "black"; 
 
    ctx.lineWidth = 5; 
 

 
    for (var i = 0; i < 12; i++) { 
 

 
     var angle = -(startAngle + i * arc); 
 
     ctx.fillStyle = "#029990"; 
 
     ctx.save(); 
 
     ctx.beginPath(); 
 
     ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false); 
 
     ctx.arc(leftValue, topValue, insideRadius, angle + arc, angle, true); 
 
     ctx.fill(); 
 
     ctx.closePath(); 
 
     // Close the old path 
 

 
     // Begin a new path 
 
     ctx.beginPath(); 
 
     // Create the arc path 
 
     ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false); 
 
     // Stroke it 
 
     ctx.stroke(); 
 
     ctx.closePath(); 
 
     ctx.restore(); 
 
    } 
 
} 
 
}

<canvas id="canvas" width="500" height="580"></canvas>

Answer 2

實際上，你可以只畫兩條弧和消除環路。以下是一個可用的簡化版本。

var ctx; 
 
var canvas = document.getElementById("canvas"); 
 
var leftValue = 250; 
 
var topValue = 150; \t 
 

 
drawWheel1(); 
 

 
function drawWheel1() { 
 
    if(canvas.getContext) { 
 
    \t var outsideRadius = 120; 
 
    \t var insideRadius = 80; 
 
     var arc = Math.PI * 2; 
 
\t 
 
     //Initialization 
 
    \t ctx = canvas.getContext("2d"); 
 
    \t ctx.lineWidth = 5; 
 
     
 
     //Draw the outer arc 
 
     \t ctx.beginPath(); 
 
    \t ctx.strokeStyle = "black"; 
 
     \t ctx.fillStyle = "#029990"; 
 
     \t ctx.arc(leftValue, topValue, outsideRadius, 0, arc, false);  
 
     ctx.stroke(); 
 
     \t ctx.fill(); 
 
     ctx.closePath(); 
 
     
 
     //Draw the inner arc 
 
     ctx.beginPath(); 
 
    \t ctx.strokeStyle = 'white'; 
 
     ctx.fillStyle = 'white'; 
 
     ctx.arc(leftValue, topValue, insideRadius, arc, 0, true); 
 
     ctx.stroke(); 
 
     \t ctx.fill(); 
 
     ctx.closePath(); 
 
    } 
 
}

<canvas id="canvas" width="500" height="580"></canvas>