我使用 HTML5 canvas 绘制了一个简单的 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 是用于创建 Action 的变量。
最佳答案
如果您在 drawCard
中删除/修复此行,闪烁将停止:
if (!pos.x || !pos.y) return;
闪烁发生在pos.x==0时。由于 !0 为真,因此不会针对该动画循环执行绘制。
关于javascript - HTML5 Canvas 2d 在同一点闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19479355/