如何流畅地动画缩放HTML5画布中的fillText()？

Question

如何流畅地动画缩放HTML5画布中的fillText()？

javascriptgoogle-chromeinternet-explorer-9html5-canvas

6

在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中，初始时动画也有点抖动，但经过几次迭代后，它变得非常流畅。

- Naximus

我认为这是一个抗锯齿错误。 - starbeamrainbowlabs

2个回答

2

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

还要注意，通过更改字体大小来缩放文本与仅对其应用变换是非常不同的。换句话说，通常情况下，8pt字体的形状与所有缩小50％的16pt字体并不相同...原因是，为了可读性和美观性，您希望小“m”字符的三条腿位于精确的像素边界上，并且大小和间距相等...很明显，通过简单地缩小坐标是不可能实现这一点的，尤其是在小字体上，差异可能会很大。

如果一个平稳慢速缩放的文本动画没有“晃动”，那么它只意味着渲染（作为文本）质量很差。但是，在这种情况下，您想要的可能是文本图像的缩放...而这就是隐藏画布的作用。

- 6502

这是一个好主意，但不幸的是我有很多短信。另外，缩放限制非常高，用户可以在文本上进行深度缩放。为了防止高缩放级别下的模糊文本，我将不得不以非常高的分辨率渲染图像，然后在绘制到目标画布之前复制和缩放它。这可能非常昂贵。 - Naximus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Allen · Accepted Answer

看起来你的回答是肯定的：http://trac.webkit.org/wiki/LayoutUnit 然而，当我缓慢调整文本大小时，我注意到文本会沿着X轴增长，然后沿着Y轴增长，接着又沿着X轴和Y轴增长，导致出现了不流畅的现象，因此可能存在其他问题……请尝试使用requestAnimationFrame和跨浏览器的shim来替代timeout：http://creativejs.com/resources/requestanimationframe/ 我创建了一个示例来测试：http://codepen.io/anon/pen/iCABx，希望对你有所帮助。

Chrome是否支持基于GPU的文本渲染？在这种情况下，文本是canvas上的图像。Canvas2D硬件加速渲染已经在Chrome 18中添加：http://en.wikipedia.org/wiki/Google_Chrome#Release_history除了canvas外，我无法确定，但我知道CSS 3D硬件加速是存在的。