如何顺利动画HTML5的缩放画布fillText方法（）

运行下面IE9产生黄油平滑动画脚本。但同样的剧本运行在Chrome20（赢得& mac）产生摇摆动画。我怎样才能解决这个问题？如何顺利动画HTML5的缩放画布fillText方法（）

此外，如果有人能够提供以下相关问题的确切答案，我将不胜感激。

铬支持亚像素文字渲染吗？

铬是否支持基于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最初的动画也有点摇摇晃晃，但经过几次反复它变得非常光滑。

来源

2012-07-29 Naximus

这是一个反锯齿问题我认为 – starbeamrainbowlabs 2012-07-30 10:37:13

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

然而，当我用文字调整很慢玩，我注意到文本沿X的增长，那么Y，那么X，那么Y，创建振荡格局，所以也许有在玩一些其他的问题...

尝试使用requestAnimationFrame与跨浏览器的垫片，而不是超时： http://creativejs.com/resources/requestanimationframe/

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

希望这有助于某种方式。

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

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

来源

2012-07-29 23:10:36 Allen

任何想法是否存在解决方案使用基于Javascript的字体呈现使用webGL后端？我知道至少Three.js在某些演示中基于webGL渲染。 – 2012-07-30 08:29:00

你可以试试。让我知道你的工作。更好的解决方案可能是使用CSS并简单地转换包含div的缩放比例。请注意，文字在确定尺寸时确实会变得模糊，但一旦出现，您就会保持相同的锐利抗锯齿效果。看例子：http://codepen.io/anon/pen/aEGHB – Allen 2012-07-31 22:09:18

此外，我通过从字体大小的高开始缩放而不是向上缩放，从而摆脱了缩放转换期间的模糊。对于您来说，解决方案可能是将字体大小设置为您想要的那样高，然后在第一次加载页面时将其缩小。之后，如果用户将其缩小，则它将会扩大而不会模糊。 http://codepen.io/anon/pen/jweIC – Allen 2012-07-31 22:28:20

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

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

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

来源

2012-07-30 08:39:16 6502

它是一个好主意，但可惜我有很多短信。缩放约束也是这样的，用户可以放大文本的深度。为了防止在高缩放级别模糊文本，我将不得不以非常高的分辨率渲染图像，然后在将其绘制到目标画布上之前进行复制和缩放。这可能非常昂贵。 – Naximus 2012-07-30 12:15:44

如何顺利动画HTML5的缩放画布fillText方法（）

回答

相关问题