以下のスクリプトをIE9で実行すると、非常に滑らかなアニメーションが生成されます。しかし、同じスクリプトをChrome20 (win および mac) で実行すると、アニメーションが不安定になります。どうすればこれを修正できますか?
また、次の関連する質問にも明確な回答を提供していただければ幸いです。
クロムはサブピクセル テキスト レンダリングをサポートしていますか?
Chrome は GPU ベースのテキスト レンダリングをサポートしていますか?
その場合は、その機能が追加された正確なバージョンと OS をお知らせください。
<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 では、最初はアニメーションも少しぐらつきますが、数回繰り返すと非常にスムーズになります。