为什么使用 requestAnimationFrame 后画布文本质量低？答案

【问题标题】：Why canvas text quality is low after requestAnimationFrame usage?为什么使用 requestAnimationFrame 后画布文本质量低？
【发布时间】：2015-01-14 11:10:22
【问题描述】：

我在画布上绘制文本，然后应用requestAnimationFrame 更改其颜色：

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

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

请参阅the demo 并使用完整代码。

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

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

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

【问题讨论】：

标签： html canvas text html5-canvas

【解决方案1】：

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

要解决这个问题，就像我已经提到的那样，您不需要清除每一帧上的画布。确保在画布上绘制任何内容之前添加此内容：

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

【讨论】：

谢谢，有帮助。但从性能的角度来看，这是一种好的方法吗？而且，我仍然想了解为什么没有画布清除它不能很好地工作......
清除画布确实不会造成太大的性能开销，事实上，它实际上可以加快画布的绘制速度。当 CPU/GPU 下一次可用于处理对画布的绘图时，requestAnimationFrame 函数会调用一个函数，afaik。