HTML5 Canvas 2d 在同一点闪烁答案

【问题标题】：HTML5 Canvas 2d Flickering at the same pointHTML5 Canvas 2d 在同一点闪烁
【发布时间】：2013-10-29 01:11:58
【问题描述】：

我在 JavaScript 中使用 HTML5 画布绘制了一个简单的动画。我的问题是动画总是在同一点闪烁。有趣的是，这在动画重置时并没有发生。

这是我用于绘图的代码：

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/

【问题讨论】：

您应该在浏览器中使用调试器变得更好。如果您使用过它，您会收到来自 index.html 的第 136 行的错误 - 您的 jsfiddle 的第 30 行。 background.cv2 未定义。因此，将其附加到 document.body 的调用失败。
啊不，这只是上一次尝试的剩余部分 - 使用双缓冲区。我已经删除了它，双缓冲区没有改变：/
问题是最左边的卡片有这个烦人的闪烁。你现在可以在 jsfiddle 看到它，因为我已经纠正了错误。
这不能解决您的问题，但您可以从drawCard 中删除那些.lineTo() 调用，因为.arcTo 的规范要求浏览器从最后一点开始添加直线反正弧中起点的路径：w3.org/html/wg/drafts/2dcontext/html5_canvas_CR/…

标签： javascript html animation canvas

【解决方案1】：

如果您删除/修复 drawCard 中的这一行，闪烁将停止：

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

闪烁发生在 pos.x==0 时。由于 !0 为真，因此您的绘制不会针对该动画循环执行。

【讨论】：

啊该死的。我总是把自己挂在简单的事情上。谢谢！我想我永远不会发现：x