为什么在使用requestAnimationFrame后画布文本质量较低？

Question

我在画布上绘制文字然后应用requestAnimationFrame来改变颜色：

var text = 'Sample text';
ctx.fillText(text,canvas_width/2,100);
requestAnimationFrame(animate);

function animate(time){
  ctx.fillText(text,-offset,100);
}

使用完整代码查看the demo。

最初文本看起来没问题（如果您评论requestAnimationFrame()行）： 但使用动画后，它看起来像下面 - 您可能会注意到那里的白色像素，看起来很糟糕（请忽略使用的颜色 - 它们用于演示问题）。

那里有什么问题？ 我认为这可能是由我的偏移/位置计算引起的 - textWidth/2，cw/2，但是它可能会不时返回不同的结果吗？

我在OSX 10.10.1下使用Google Chrome 39.0.2171.95（64位）测试了代码。

Answer 1

您没有清除画布，因此旧文本将保留在那里。这就是给你白色像素的问题。这个问题（推测）是因为抗锯齿。

为了解决这个问题，就像我刚才提到的那样，你并没有在每一帧上清除画布。确保在画布上绘制任何内容之前添加它：

ctx.clearRect(0, 0, canvas.width, canvas.height)