如何平滑地動畫縮放HTML5 canvas 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硬件加速存在。

Answer 2

如果您的文本只是一條消息，那么一個合理的解決方案是在單獨的隱藏畫布對象中創建一個大文本，然后使用所需的縮放比例將其繪制為圖像。

還要注意，通過更改字體大小來縮放文本與僅對文本進行轉換有很大不同。 換句話說，通常8pt字體的形狀不僅與16pt字體相同，而且所有內容的比例都縮小了50％...例如，出於可讀性和美觀性的原因，您需要三個小“ m”的三腳字符在精確的像素邊界上並且大小和間距均等...顯然，僅通過縮小坐標是不可能的，並且差異（尤其是小字體）可能很大。

如果具有平滑緩慢縮放的文本動畫沒有“擺動”，則僅表示渲染（作為文本）質量較差。 但是在那種情況下，可能您想要的是縮放文本圖像……這就是隱藏的畫布。