帆布：小圓弧

之間。在此卸下間隙例如： http://jsfiddle.net/pcNzb/9/帆布：小圓弧

我剛剛學習，所以我一定是錯過了什麼或做錯了什麼。 :)

看到弧之間的差距？我正在用小圓弧建立整個圓。我知道如何解決這個問題，但我想最好避免在每一步中重新繪製完整的弧線或者我錯了？

我發現了另一個解決方案，帶有偏移量。設定偏移，moveToRad + 0.009

ctx.arc(x(),y(),radius,-moveFromRad,-moveToRad-0.009,antiClockwise);

重疊一種優於另一種弧部分，但是，如果我使用RGBA阿爾法至0.5例如變得可見。

除了每個步驟上的整圈重繪之外，還有其他解決方案嗎？

來源

2012-10-30 Somebody

我建議你重新繪製在每一步...可能它會更快，代碼很少;） – thinklinux

除了每個步驟上的整圈重繪之外，還有其他一些修復嗎？

總之不，如果你希望它能夠跨瀏覽器工作，並用半透明色看起來不錯。

這意味着，修改代碼以清除每個繪製和消除起始角度步：http://jsfiddle.net/pcNzb/10/

看到兩個!!! - 標記評論：

var interval=setInterval(function(){ 
    if(stop) { 
     return; 
    } 
    // Log current state 
    log.prepend('<tr><td>We are at PIradians '+moveToRad/Math.PI+'</td><td>, radians '+moveToRad+'</td><td>, degrees '+Math.round(moveToRad*180/Math.PI)+'</td></tr>'); 

    // console.log('We are at PIradians',moveToRad/Math.PI,', radians',moveToRad,', degrees',Math.round(moveToRad*180/Math.PI)); 

    // Clear after full cycle 
    if(moveToRad>=fullCycle){ 
     cycle(); 
    } 
    clear(); // !!! gotta clear! 

    // Create arc 
    // 0.01 fix offset, to remove that gap between arc parts 
    ctx.arc(x(),y(),radius,-moveFromRad,-moveToRad,antiClockwise); 

    // Draw arc line 
    ctx.stroke(); 

    // Recalculate text width 
    txtsizes=ctx.measureText(cycles); 
    // Text width/2 and font-size/3 to ~center the text in circle 
    ctx.fillText(cycles, x(-txtsizes.width/2), y(font_height/3)); 

    // Don't redraw full arc from the start, draw from the last point 
    //moveFromRad+=step; // !!! no more me! 
    // Increment radian for the next step 
    moveToRad+=step; 

    ctx.beginPath();     
},period);

來源

2012-10-30 22:37:49

是的，猜測這是唯一的解決方案。我試圖減少到0.3度，但它太慢了。：d – Somebody

帆布：小圓弧

回答

相關問題