Question

在 IE9 中运行以下脚本会产生一个黄油平滑动画。但是在 Chrome20 （win＆amp; mac）中运行相同的脚本会产生摇摆不定的动画。我该如何解决这个问题？

如果有人能够对以下相关问题给出明确的答案，我将不胜感激。

chrome是否支持子像素文字渲染？

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

如果是，那么请提及添加功能的确切版本和操作系统。

<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硬件加速存在。

Answer 2

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

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

如果具有平滑慢变焦的文本的动画不“摇摆”，那么它仅仅意味着渲染（作为文本）质量差。但可能在这种情况下你想要的是缩放文本的图像...这就是隐藏的画布。

如何平滑地动画缩放HTML5画布fillText（）

2 个答案: