8

Canvas でテキストを描画していますが、アンチエイリアスの品質にがっかりしています。私が確認した限りでは、ブラウザは Canvas 上のテキストのサブピクセル アンチエイリアス処理を行っていません。

これは正確ですか？

これは、結果のテキストが他の DOM 要素によってレンダリングされたテキストほど鮮明ではない iPhone と Android で特に顕著です。

Canvas に高品質のテキストを出力するための提案はありますか?

ジュベール

4

4 に答える 4

9

私の答えはこのリンクから来ました。多分それは他の誰かを助けるでしょう。 http://www.html5rocks.com/en/tutorials/canvas/hidpi/

重要なコードは次のとおりです。

// finally query the various pixel ratios
    devicePixelRatio = window.devicePixelRatio || 1,
    backingStoreRatio = context.webkitBackingStorePixelRatio ||
                        context.mozBackingStorePixelRatio ||
                        context.msBackingStorePixelRatio ||
                        context.oBackingStorePixelRatio ||
                        context.backingStorePixelRatio || 1,

    ratio = devicePixelRatio / backingStoreRatio;

// upscale the canvas if the two ratios don't match
if (devicePixelRatio !== backingStoreRatio) {

    var oldWidth = canvas.width;
    var oldHeight = canvas.height;

    canvas.width = oldWidth * ratio;
    canvas.height = oldHeight * ratio;

    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';

    // now scale the context to counter
    // the fact that we've manually scaled
    // our canvas element
    context.scale(ratio, ratio);

}
于 2014-10-02T05:05:47.200 に答える
3

ページに次の META タグを追加してみてください。これにより、iPhone Safari で発生したアンチエイリアシングの問題が修正されるようです。

<meta name="viewport" content="user-scalable=no, width=device-width,
      initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5" />
于 2012-11-16T16:05:30.367 に答える
0

いくつかのサブピクセルアンチエイリアスが実行されますが、それはブラウザ/OS次第です。

これについては、以前に少し議論がありましたが、それはあなたの助けになるかもしれません。

私はAndroidまたはiOSデバイスを持っていませんが、キックのためだけに、描画する前にコンテキストを（.5、0）ピクセルで変換してみて、テキストのレンダリング方法に違いがあるかどうかを確認してください。

于 2011-03-10T17:03:45.040 に答える