帆布：小圆弧

之间。在此卸下间隙例如： 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

帆布：小圆弧

回答

相关问题