如何順利動畫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方法（）

回答

相關問題