如何在畫布元素中正確繪製一個帶有空隙的圓？

Question

我想畫一個圓圈。但是，不是真的。我想要一系列弧線（分段），這意味着一整圈。它會旋轉，它會很棒。但我顯然做錯了什麼。 Please, check this fiddle: http://jsfiddle.net/utWdM/

function draw() { 
    var canvas = document.getElementById("canvas"); 
    if (canvas.getContext) { 
     var ctx = canvas.getContext("2d"); 
     ctx.lineWidth = 15; 
     ctx.strokeStyle = 'hsla(111, 56%, 50%, 0.67)'; 
     ctx.beginPath(); 

     ctx.arc(250, 250, 100, 0, Math.PI * 8/30); 
     ctx.moveTo(250, 250); 
     ctx.arc(250, 250, 100, Math.PI * 12/30, Math.PI * 20/30); 
     ctx.moveTo(250, 250); 
     ctx.arc(250, 250, 100, Math.PI * 24/30, Math.PI * 32/30); 
     ctx.moveTo(250, 250); 
     ctx.arc(250, 250, 100, Math.PI * 36/30, Math.PI * 44/30); 
     ctx.moveTo(250, 250); 
     ctx.arc(250, 250, 100, Math.PI * 48/30, Math.PI * 56/30); 

     ctx.stroke(); 
     ctx.closePath(); 
    } 
} 

draw(); 

我不想從中心到弧（和第一個不擁有它）開始行。 我一直在用畫布學習基本繪圖，希望能夠理解將來會發生什麼，甚至更多，但是我迫不及待地想知道在這種情況下出了什麼問題。 任何幫助，高度讚賞。

Answer 1

對moveTo必須是圓弧不是中心的開始。如下所示，這很容易通過轉換到圓心來實現。 http://jsfiddle.net/utWdM/1

function draw() { 
    var canvas = document.getElementById("canvas"); 
    if (canvas.getContext) { 
     var ctx = canvas.getContext("2d"); 
     ctx.lineWidth = 15; 
     ctx.strokeStyle = 'hsla(111, 56%, 50%, 0.67)'; 
     ctx.beginPath(); 

     ctx.translate(250,250); 
     ctx.arc(0, 0, 100, 0, Math.PI * 8/30); 
     ctx.moveTo(100*Math.cos(Math.PI*12/30), 100*Math.sin(Math.PI*12/30)); 
     ctx.arc(0, 0, 100, Math.PI * 12/30, Math.PI * 20/30); 
     ctx.moveTo(100*Math.cos(Math.PI*24/30), 100*Math.sin(Math.PI*24/30)); 
     ctx.arc(0, 0, 100, Math.PI * 24/30, Math.PI * 32/30); 
     ctx.moveTo(100*Math.cos(Math.PI*36/30), 100*Math.sin(Math.PI*36/30)); 
     ctx.arc(0, 0, 100, Math.PI * 36/30, Math.PI * 44/30); 
     ctx.moveTo(100*Math.cos(Math.PI*48/30), 100*Math.sin(Math.PI*48/30)); 
     ctx.arc(0, 0, 100, Math.PI * 48/30, Math.PI * 56/30); 

     ctx.stroke(); 
     ctx.closePath(); 
    } 
} 

Answer 2

要避免複雜的數學運算，最簡單的方法是爲每個段調用.beginPath()和.stroke();。我知道這是很重複，但是，它會是什麼樣子：

function draw() { 
    var canvas = document.getElementById("canvas"); 
    if (canvas.getContext) { 
     var ctx = canvas.getContext("2d"); 
     ctx.lineWidth = 15; 
     ctx.strokeStyle = 'hsla(111, 56%, 50%, 0.67)'; 

     ctx.beginPath();   
     ctx.arc(250, 250, 100, 0, Math.PI * 8/30); 
     ctx.stroke(); 

     ctx.beginPath(); 
     ctx.arc(250, 250, 100, Math.PI * 12/30, Math.PI * 20/30); 
     ctx.stroke(); 

     ctx.beginPath(); 
     ctx.arc(250, 250, 100, Math.PI * 24/30, Math.PI * 32/30); 
     ctx.stroke(); 

     ctx.beginPath(); 
     ctx.arc(250, 250, 100, Math.PI * 36/30, Math.PI * 44/30); 
     ctx.stroke(); 

     ctx.beginPath(); 
     ctx.arc(250, 250, 100, Math.PI * 48/30, Math.PI * 56/30); 
     ctx.stroke(); 
    } 
} 

draw(); 

而且這裏是你的提琴：http://jsfiddle.net/utWdM/13/

Answer 3

如果你想要一點靈活的解決方案，即。如果你想改變的段數，每個段的大小，那麼你可以創建一個通用的功能，像這樣：

/** 
* ctx  = context 
* x/y = center 
* radius = of circle 
* offset = rotation in angle (radians) 
* segments = How many segments circle should be in 
* size  = size of each segment (of one segment) [0.0, 1.0] 
*/ 
function dashedCircle(ctx, x, y, radius, offset, segments, size) { 

    var pi2 = 2 * Math.PI,    /// cache 2*Math.PI = 360 degrees in rads 
     segs = pi2/segments,   /// calc. size of each segment in rads 
     len = segs * size,    /// calc. length of segment in rads 
     i = 0, 
     ax, ay; 

    ctx.save(); 
    ctx.translate(x, y); 
    ctx.rotate(offset);    /// rotate canvas 
    ctx.translate(-x, -y); 

    for(; i < pi2; i += segs) { 
     ax = x + radius * Math.cos(i); /// calculate start position of arc 
     ay = y + radius * Math.sin(i); 
     ctx.moveTo(ax, ay);   /// make sure to move to beginning of arc 
     ctx.arc(x, y, radius, i, i + len); /// draw arc 
    } 

    ctx.restore();      /// remove rotation 
} 

然後在你的代碼，你只需撥打：

ctx.beginPath(); 

dashedCircle(ctx, 250, 250, 100, 0, 5, 0.7); 

ctx.lineWidth = 15; 
ctx.strokeStyle = 'hsla(111, 56%, 50%, 0.67)'; 
ctx.stroke(); 
/// don't closePath here 

Modified fiddle here

使用偏移參數是一件輕而易舉的將它旋轉：

var offset = 0; 
var step = 0.03; 
var pi2 = 2 * Math.PI; 

(function loop() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.beginPath(); 

    dashedCircle(ctx, 250, 250, 100, offset % pi2, 5, 0.7); 
    ctx.stroke(); 

    offset += step; 

    requestAnimationFrame(loop); 
})(); 

Rotating circle fiddle