1

这是示例：http: //jsfiddle.net/pcNzb/9/

我只是学习，所以我一定是错过了什么或做错了什么。:)

看到弧之间的间隙了吗？我正在用小弧线构建完整的圆圈。我知道如何解决它，但我想最好避免在每一步都重新绘制完整的弧线，否则我错了？

我找到了另一个解决方案，带有偏移量。设置偏移量 moveToRad+0.009

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

将一个弧形部分重叠在另一个弧形部分上，但如果我使用 rgba alpha 到 0.5 则这变得可见。

除了在每个步骤上重绘整个圆圈之外，还有其他解决方法吗？

4

1 回答 1

0

除了在每个步骤上重绘整个圆圈之外，还有其他解决方法吗？

简而言之，不，如果您希望它可以跨浏览器工作并且使用半透明颜色看起来不错，则不会。

这意味着，修改您的代码以清除每次绘制并消除起始角度步骤：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-30T22:37:49.057 回答