HTML5畫布2d在同一點閃爍

我在JavaScript中使用HTML5畫布進行了簡單的動畫繪製。我的問題是動畫總是在同一點閃爍。有趣的是，在動畫重置的時候這不會發生。HTML5畫布2d在同一點閃爍

因此，這裏是我使用的繪圖代碼：

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/

來源

2013-10-20 Kafioin

您應該在瀏覽器中使用調試器更好。如果你使用過它，你會收到index.html的第136行的錯誤 - 你的jsfiddle的第30行。 'background.cv2'沒有被定義。因此將它附加到document.body的調用失敗。 – enhzflep

啊不，這只是以前嘗試的剩餘部分 - 使用雙緩衝區。我已經刪除它，雙緩衝區沒有改變一件事情：/ – Kafioin

問題是在最左邊的卡上有這種惱人的閃爍。你可以在jsfiddle中看到它，因爲我糾正了錯誤。 – Kafioin

如果您刪除/修復這一行drawCard閃爍將停止：

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

閃爍時發生pos.x == 0。由於！0爲true，所以您的繪圖不會執行該動畫循環。

來源

2013-10-20 16:34:38 markE

啊地獄。我總是把自己放在簡單的事情上。謝謝！猜猜我永遠不會發現：x – Kafioin

HTML5畫布2d在同一點閃爍

回答

相關問題