Question

我只是在学习，所以我一定错过了什么或做错了什么。：）

看到弧线之间的差距？我正在建立一个小圆弧的圆圈。我知道如何修复它，但我想最好避免在每一步重绘完整弧线，否则我错了？

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

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

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

除了每一步的完整循环重绘外，还有其他一些方法吗？

Answer 1

除了每一步的完整循环重绘外，还有其他一些方法吗？

简而言之，不是，如果您希望它跨浏览器工作并且看起来很好用半透明颜色。

这意味着，修改代码以清除每次绘制并消除开始角度步骤：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);

画布：消除小弧之间的间隙

1 个答案: