0

ページに揺れる div があり、その上にテキストがあります。cssのrotateとjqueryで揺れるアニメーションを作っています。ここで見ることができますhttp://jsfiddle.net/novellino/Em7ej/

私の問題は、div が動き始めるとテキストがぼやけてしまうことです。これを追加するような解決策を試しました:

 -webkit-backface-visibility: hidden;

CSSまたはこれで：

 -webkit-transform-origin: 50%  51%;

しかし、まだ機能していません。これを解決できるかどうか、またどのように解決できるか知っている人はいますか?

前もって感謝します。

4

1 に答える 1

0

これは、ブラウザのテキスト レンダリング エンジンからのアーティファクトです。テキストはキャッシュされませんが、変更ごとにレンダリングされ、個々のポイントが変換 (回転) されます。不正確さと丸め誤差により、レンダリングに多少の一貫性がなくなります。

この問題を回避するには、まずテキストを画像にレンダリングし、代わりにそれを使用します。これは、次の 2 つの方法で行うことができます。

  • オフラインで事前レンダリングして使用する
  • canvas 要素を使用してテキストをライブでレンダリングする

これには、パフォーマンスが向上するという追加の利点があります。

ここで修正されたフィドル

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

canvas.width = 90;
canvas.height = 90;

ctx.fillStyle = '#613a1c';
ctx.font = '16px serif';
ctx.textBaseline = 'top';
ctx.fillText('Hello', 20, 20);
ctx.fillText('I am the', 20, 38);
ctx.fillText('text', 20, 56);

document.getElementById('info_txt').appendChild(canvas);
于 2014-03-21T07:35:24.530 に答える