1

描画用の HTML5 キャンバスを使用して、JavaScript で簡単なアニメーションを作成しました。私の問題は、アニメーションが常に同じポイントでちらつくことです。興味深いことに、これはアニメーションがリセットされる時点では発生していません。

描画に使用するコードは次のとおりです。

draw: function() {
    var canvas = background.ct; 
    canvas.clearRect(0,0, WINDOW_WIDTH, WINDOW_HEIGHT);
    for (var i = 0; i < 12; i++)
    {
        var sX = startX+((SLOT_WIDTH+20)*i)+mod;
        drawCard(
                {x: sX,
                    y: startY,
                    color: "#0A5",
                    ctx: canvas});
        if (resetX == sX && mod != 0) //resets the animation
            {
                console.log('resetting at '+mod);
                mod = 0;
            }

        if ( i == 1 && resetX == 0) //get reset-point
            {
                resetX = startX+((SLOT_WIDTH+20)*i)+mod;
            }


    }
    mod++;

}

これは drawCard 関数です:

/*
 * Draw 1 Card where x/y is the center of the card
 */
 function drawCard(pos)
 {
if (!pos.x || !pos.y)
    return;

var c_top_left_x = pos.x - SLOT_WIDTH / 2;
var c_top_y = pos.y - SLOT_HEIGHT / 2;
var c_top_right_x = pos.x + SLOT_WIDTH / 2;
var c_bot_left_x = pos.x - SLOT_WIDTH / 2;
var c_bot_right_x = pos.x + SLOT_WIDTH / 2;
var c_bot_y = pos.y + SLOT_HEIGHT / 2;

var canvas = pos.ctx;
canvas.beginPath();
canvas.moveTo(c_top_left_x + RAD, c_top_y);
canvas.lineTo(c_top_right_x - RAD, c_top_y);
canvas.arcTo(c_top_right_x, c_top_y, c_top_right_x, c_top_y + RAD, RAD);
canvas.lineTo(c_bot_right_x, c_bot_y - RAD);
canvas.arcTo(c_bot_right_x, c_bot_y, c_bot_right_x - RAD, c_bot_y, RAD);
canvas.lineTo(c_bot_left_x + RAD, c_bot_y);
canvas.arcTo(c_bot_left_x, c_bot_y, c_bot_left_x, c_bot_y - RAD, RAD);
canvas.lineTo(c_top_left_x, c_top_y + RAD);
canvas.arcTo(c_top_left_x, c_top_y, c_top_left_x + RAD, c_top_y, RAD);
canvas.fillStyle = pos.color;

canvas.fill();

}

mod は、モーションの作成に使用される変数です。

完全なソースはhttp://jsfiddle.net/Kafioin/ymddh/にあります。

4

1 に答える 1

2

この行を削除/修正するとdrawCard、ちらつきが停止します。

if (!pos.x || !pos.y) return;

pos.x==0 のときにちらつきが発生します。!0 が true であるため、そのアニメーション ループでは描画は実行されません。

于 2013-10-20T16:34:38.793 に答える