为什么 canvas 使用 requestAnimationFrame 后文本质量低？

Question

我在 canvas 上绘制文本，然后应用 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() 行）：但在使用动画后它看起来像下面 - 您可能会注意到那里有白色像素，看起来很糟糕（请忽略使用的颜色 - 它们用于演示问题）。

哪里出了问题？我在想这可能是由我的 offset/position 计算引起的 - textWidth/2、cw/2，但它会不会时不时 return 不同的结果？

我已经在 OSX 10.10.1.

下使用 Google Chrome 39.0.2171.95（64 位）测试了代码

Answer 1

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

要解决这个问题，就像我提到的那样，您不会在每一帧上清除 canvas。确保在 canvas:

上绘制任何内容之前添加此内容

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

为什么 canvas 使用 requestAnimationFrame 后文本质量低？

Why canvas text quality is low after requestAnimationFrame usage?

html

text

canvas

html5-canvas