web-dev-qa-db-ja.com

HTML5のキャンバス要素上のサブピクセルアンチエイリアステキスト

Canvas要素のアンチエイリアステキストの方法に少し戸惑っていますが、皆さんのお役に立てれば幸いです。

次のスクリーンショットでは、上部の「Quick Brown Fox」がH1要素で、下部の1つがテキストがレンダリングされたcanvas要素です。下部には、両方の「F」が並んで配置され、拡大表示されています。H1要素が背景とよく調和していることに注目してください。

これが、キャンバステキストをレンダリングするために使用しているコードです。

        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要素と同一に見えるようにキャンバス上のテキストをレンダリングすることは可能ですか？そして、なぜ彼らは違うのですか？

htmltextcanvasantialiasingsubpixel
45
Matt Mazur

私自身の質問に答える：

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

https://bel.fi/alankila/lcd/

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

14
Matt Mazur

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

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

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

23
sirwart

マット、私は先週、（同じ/同様の）問題に腰を下ろしました。私の場合は、テストしているデバイスのピクセル密度の違いが原因であることがわかりました。今夜私はそれについて書いた- http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and

後発のリンクは死んでいるので、ここにソースコードを含むGistがあります。 https://Gist.github.com/joubertnel/87019

そしてスニペット自体：

  // 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);
7
Joubert Nel

anyキャンバスコンテンツ（テキスト、画像、ベクターなど）のサブピクセルレンダリングを行う方法を次に示します。 http://johnvalentine.co.uk/archive.php?art=tft 。

方法の概要

キャンバスに描画し、それを画面に描画して、RGBストライプのサブピクセルを利用します。アルファチャンネルでも動作します。ポートレートディスプレイ、縞模様のな​​いピクセルを使用している場合、またはブラウザがキャンバスをディスプレイよりも低い解像度で表示している場合、これは機能しない可能性があることに注意してください。

微調整の余地はありますが、単純な方法では大きな利益になります。

2
j5v

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

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

編集：私の仮定は間違っていました。 Safari、Chrome、Firefoxはすべて、ピクセルフォントのヒントを利用しているように見えます。 SafariとChromeは同じように表示され、ピクセル境界全体にスナップしますが、Firefoxとは異なります（ハーフピクセル境界にスナップしますか？）（OS Xでの）テストの視覚的な結果は、次のとおりです。 http://phrogz.net/tmp/canvas_text_subpixel.html

1
Phrogz