0

アイデアはシンプルで、テキストで星を作成し、回転させます。

しかし、簡単なスクリプトを作成した後はスムーズではありません here is my fiddle

星はオケが動いていますが、テキストはヘビのように揺れています:)

4

2 に答える 2

2

原因

これが発生する理由は、ブラウザのテキスト レンダリング エンジンが原因です。同じ回転行列を使用してテキスト パスの各ポイントを変換していますが、エンジンが原因で丸めエラーが発生し、テキストが「ジバー」します。

これは、キャンバスだけでなく、テキストの CSS 変換でも発生します。

解決

テキストをキャンバスの「レイヤー」にレンダリングし、それをテキスト自体の代わりに回転する画像として使用するだけです。これにより、テキストが通常の位置にラスタライズされ、変換はビットマップ上で行われ、ほとんどのブラウザがうまく処理します。

コメントでリンクした回答を統合した例を次に示します。前後の比較子としても機能するため、本文のみを表示しています。

// canvas layer
var tcanvas = document.createElement('canvas'); //tcanvas must be in global scope
var tctx = tcanvas.getContext('2d');

tcanvas.width = canvas.width;
tcanvas.height = canvas.height;

tctx.translate(250, 250);
tctx.fillStyle = "black";
tctx.font = "bold 60px Arial";
tctx.textAlign = 'center';
tctx.fillText('€ 1215,34', 0, 0);

これでレイヤーの準備が整い、代わりにテキスト描画メソッドを単一の drawImage に置き換えることができます。

c.drawImage(tcanvas, -x, -y);

この変更の結果

「追加」を描画するには、それらの線をレイヤー作成にも移動します。この例の tcanvas は、グローバルにアクセスできる必要があることに注意してください。

テキストの回転速度が意図的でない場合は、テキストをレンダリングする前に、rotate の 2 番目の呼び出しを削除してください。

ヒント: グラデーションと星を再描画する代わりに、一度別のレイヤーにレンダリングし、それを画像として回転させます。これにより、はるかに効率的になります。また、rotate() 自体のステップを累積するだけで保存/復元 (比較的コストがかかる) を回避し、setTransform を使用して絶対値を使用して行列を変換することもできます。

メモリ使用量を最適化する方法: テキスト レイヤーには、テキストが正確に収まるキャンバス サイズを使用します (テキスト レンダリング エンジンに応じて、ブラウザーごとにテキスト サイズと位置が異なる可能性があるため、固定値を使用しないでください)。星の場合も同様です。そのためのレイヤーも使用する場合。

お役に立てれば！

于 2014-04-19T11:46:14.910 に答える