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/

!!! でマークされた 2 つのコメントを参照してください。

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 に答える