47

canvas 要素がテキストをアンチエイリアスする方法に少し混乱しており、皆さんが助けてくれることを願っています。

次のスクリーンショットで、上の「Quick Brown Fox」は H1 要素で、下の要素はテキストがレンダリングされたキャンバス要素です。下部には、両方の「F」が並べて配置され、ズームインされているのがわかります。H1 要素が背景とどのように調和しているかに注目してください。

例 'F'

キャンバステキストをレンダリングするために使用しているコードは次のとおりです。

        var canvas = document.getElementById('canvas');
        if (canvas.getContext){

            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'black';
            ctx.font = '26px Arial';
            ctx.fillText('Quick Brown Fox', 0, 26);
        }

キャンバス上のテキストを H1 要素と同じようにレンダリングすることはできますか? そして、なぜそれらは異なるのですか？

4

6 に答える 6

30

不透明なキャンバス コンテキストを作成することで、サブピクセル フォントのレンダリングを取得できるようになりました。Safari と Chrome では、次のスニペットを使用してこれを取得できます。

var ctx = canvas.getContext("2d", {alpha: false})

このブログ投稿からこれを見つけました。

于 2015-01-27T00:50:33.637 に答える
14

私自身の質問に答える：

このサイトで説明されている手法を使用して可能です。

https://bel.fi/alakila/lcd/

唯一の問題は、実稼働アプリに実装するには遅すぎることです。誰かがより速い方法に出くわしたら、私に知らせてください。

于 2010-12-29T15:45:36.330 に答える
7

マット、私は先週 (同じ/類似した) 問題を抱えていましたが、私の場合は、テストしていたデバイスのピクセル密度の違いが原因であることが判明しました。私は今夜​​それについて書きました - http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and

posterous のリンクは無効になっているため、ソース コードの要点は次のとおりです: https://gist.github.com/joubertnel/870190

そしてスニペット自体：

  // Output to Canvas without consideration of device pixel ratio
  var naiveContext = $('#naive')[0].getContext('2d');    
  naiveContext.font = '16px Palatino';
  naiveContext.fillText('Rothko is classified as an abstract expressionist.', 10, 20);

  // Output to Canvas, taking into account devices such as iPhone 4 with Retina Display
  var hidefCanvas = $('#hidef')[0];
  var hidefContext = hidefCanvas.getContext('2d');

  if (window.devicePixelRatio) {
    var hidefCanvasWidth = $(hidefCanvas).attr('width');
    var hidefCanvasHeight = $(hidefCanvas).attr('height');
    var hidefCanvasCssWidth = hidefCanvasWidth;
    var hidefCanvasCssHeight = hidefCanvasHeight;

    $(hidefCanvas).attr('width', hidefCanvasWidth * window.devicePixelRatio);
    $(hidefCanvas).attr('height', hidefCanvasHeight * window.devicePixelRatio);
    $(hidefCanvas).css('width', hidefCanvasCssWidth);
    $(hidefCanvas).css('height', hidefCanvasCssHeight);
    hidefContext.scale(window.devicePixelRatio, window.devicePixelRatio);               
  }

  hidefContext.font = "16px Palantino";
  hidefContext.fillText("Rothko is classified as an abstract expressionist.", 10, 20);
于 2011-03-15T02:38:21.997 に答える
1

これは、一般的にサブピクセル アンチエイリアシング、またはWindows ではClearTypeと呼ばれます。現在 Canvas でこれをサポートしている OS とブラウザの組み合わせを知りません。

テキストにサブピクセル オフセットを使用するいくつかのテストを見て、フォント レンダリングのピクセルベースのヒンティング (たとえば、ピクセル境界にアセンダーを揃える) を使用するブラウザーがあるかどうかを確認することに興味があります。私の仮定はノーです。

編集：私の仮定は間違っていました。Safari、Chrome、および Firefox はすべて、何らかのピクセル フォント ヒンティングを利用しているようです。Safari と Chrome は同じように表示され、ピクセル境界全体にスナップしますが、Firefox とは異なります (半ピクセル境界にスナップしますか?)。ここで（OS X上で）テストの視覚的な結果を参照してください：http://phrogz.net/tmp/canvas_text_subpixel.html

于 2010-12-29T02:17:34.017 に答える