如何平滑地动画 HTML5 画布 fillText() 的缩放

Question

在 IE9 中运行下面的脚本会产生黄油般的 平滑 动画。但是在 Chrome20 (win & mac) 中运行相同的脚本会产生 wobbly 动画。我该如何解决这个问题？

如果有人也可以对以下相关问题提供明确的答案，我将不胜感激。

chrome 是否支持亚像素文本渲染？

chrome 是否支持基于 GPU 的文本渲染？

如果是这样，请说明添加该功能的确切版本和操作系统。

http://jsbin.com/ijegam/2

<canvas id="myCanvas" width="1000" height="500" style="border:1px solid #d3d3d3;">
</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var i=12;
function f() {
    ctx.clearRect(0,0,1000,500);
    ctx.font=i + "px Arial";
    ctx.fillText("Hello World",10,350);
    i+=0.1;
}
setInterval("f()", 16);
</script>

在 IE9 中，动画最初也有点不稳定，但经过几次迭代后，它变得非常流畅。

Answer 1

看来你的答案是肯定的：http://trac.webkit.org/wiki/LayoutUnit

但是，当我调整文本大小的速度非常缓慢时，我注意到文本沿 X、Y、X、Y 增长，造成这种波动，所以可能还有其他问题在起作用。 ..

尝试将 requestAnimationFrame 与跨浏览器 shim 一起使用，而不是使用超时： http://creativejs.com/resources/requestanimationframe/

我创建了这个来玩：http://codepen.io/anon/pen/iCABx

希望在某种程度上有所帮助。

chrome 是否支持基于 GPU 的文本渲染？

在这种情况下，文本是画布上的绘图。 Chrome 18 中添加了 Canvas2D 硬件加速渲染：http://en.wikipedia.org/wiki/Google_Chrome#Release_history 除了画布，我不能肯定，但我知道 CSS 3D 硬件加速存在。

Answer 2

如果您的文本只是一条消息，一个合理的解决方案可能是在单独的隐藏画布对象中创建一个大文本，然后将其绘制为具有您需要的缩放比例的图像。

还请注意，通过更改字体大小来缩放文本与仅对其应用转换完全不同。换句话说，一般来说，8pt 字体的形状与 16pt 字体的形状不同，所有内容都缩小了 50%……原因是例如，为了可读性和美观，你想要一个小“m”的三个腿字符以精确的像素边界和相同的大小和间距...显然这不可能通过简单地缩小坐标并且差异（尤其是在小字体上）可能很大。

如果平滑缓慢缩放的文本动画没有“摇晃”，则仅表示渲染（作为文本）质量较差。但在这种情况下，您可能想要的是放大文本图像......这就是隐藏的画布。