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

Question

在IE9 中运行下面的脚本会产生一个平滑的动画。但是在Chrome20 (win & mac) 中运行时相同的脚本会产生一个不稳定的动画。我怎样才能解决这个问题？

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

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 与跨浏览器填充程序而不是超时： 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 硬件加速存在。