5

以下のスクリプトをIE9で実行すると、非常に滑らかなアニメーションが生成されます。しかし、同じスクリプトをChrome20 (win および mac) で実行すると、アニメーションが不安定になります。どうすればこれを修正できますか?

また、次の関連する質問にも明確な回答を提供していただければ幸いです。

クロムはサブピクセル テキスト レンダリングをサポートしていますか?

Chrome は GPU ベースのテキスト レンダリングをサポートしていますか?

その場合は、その機能が追加された正確なバージョンと OS をお知らせください。

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 では、最初はアニメーションも少しぐらつきますが、数回繰り返すと非常にスムーズになります。

4

2 に答える 2

2

あなたの答えはイエスのようです: http://trac.webkit.org/wiki/LayoutUnit

ただし、テキストのサイズ変更が非常に遅いと、テキストが X、Y、X、Y の順に大きくなり、途切れ途切れになっていることに気付きます。他の問題が発生している可能性があります...

タイムアウトの代わりに、クロスブラウザー シムで requestAnimationFrame を使用してみてください: http://creativejs.com/resources/requestanimationframe/

遊ぶためにこれを作成しました：http://codepen.io/anon/pen/iCABx

うまくいけば、それが何らかの形で役立ちます。

Chrome は GPU ベースのテキスト レンダリングをサポートしていますか?

この場合、テキストはキャンバス上の描画です。Canvas2D ハードウェア アクセラレーション レンダリングが Chrome 18 に追加されました: http://en.wikipedia.org/wiki/Google_Chrome#Release_history キャンバス以外は、確かなことは言えませんが、CSS 3D ハードウェア アクセラレーションが存在することは知っています。

于 2012-07-29T23:10:36.910 に答える
1

テキストが単一のメッセージである場合、合理的な解決策は、別の非表示のキャンバスオブジェクトに大きなテキストを作成し、これを必要なスケーリングで画像として描画することです。

また、フォントサイズを変更してテキストを拡大縮小することは、単に変換を適用することとはまったく異なることにも注意してください。言い換えれば、一般的に、8ptフォントの形状は、すべてが50％縮小された16ptフォントと同じではありません...理由は、たとえば、読みやすさと美学のために、小さな「m」の3本の脚が必要なためです。正確なピクセル境界上で、同じサイズと間隔で文字を並べます...明らかに、これは単に座標を縮小するだけでは不可能であり、（特に小さなフォントでは）違いが大きくなる可能性があります。

スムーズな低速ズームを使用したテキストのアニメーションが「ぐらつく」ことがない場合、それは単に（テキストとしての）レンダリングの品質が低いことを意味します。しかし、おそらくその場合、あなたが望むのはテキストの画像をズームすることです...そしてそれが隠されたキャンバスです。

于 2012-07-30T08:39:16.607 に答える