5

Running the script below in IE9 produces a buttery smooth animation. But the same script when run in Chrome20 (win & mac) produces a wobbly animation. How can i fix this?

Also I would appreciate if someone could provide a definite answer to the following related questions as well.

Does chrome support sub-pixel text rendering?

Does chrome support GPU based text rendering?

If so then please mention the exact version and OS the feature was added in.

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>

In IE9 initially the animation is also a bit wobbly but after a few iterations it becomes extremely smooth.

4

2 回答 2

2

看来您的答案是肯定的： 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 硬件加速存在。

于 2012-07-29T23:10:36.910 回答
1

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

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

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

于 2012-07-30T08:39:16.607 回答