2012年2月21日火曜日

HTML5 Canvas 2D Context に Web Fonts を用いて fillText してみる / Google Web Fonts の WebFont Loader を使ってみる

動機
先のエントリーと,このpostと,この記事より.


参考
  • WebFont Loader - Google Web Fonts — Google Developers


  • やってみた
    緑色(赤色は実行内容に即して変更)の部分は上記参考ページより.

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    WebFontConfig = {
    google: {
    families: [ 'Ewert', 'Fredericka the Great', 'Ubuntu' ]
    },
    active: function() {
    paint();
    },
    };
    (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
    })();
    </script>

    <script type="text/javascript">
    function paint() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgba(255, 255, 255, 255)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    var fontName= document.defaultView.getComputedStyle(canvas, null).fontFamily;
    ctx.fillStyle= "rgba(0,0,0,255)";
    ctx.font = "32px 'Helvetica'";
    ctx.fillText("Helvetica", 10, 50);
    ctx.fillText("AGCDEFGHIJKLMN 12345+-", 350, 50);
    ctx.font = "32px '"+fontName+"'";
    ctx.fillText("Ewert", 10, 100);
    ctx.fillText("AGCDEFGHIJKLMN 12345+-", 350, 100);
    ctx.font = "32px 'Fredericka the Great'";
    ctx.fillText("Fredericka the Great", 10, 150);
    ctx.fillText("AGCDEFGHIJKLMN 12345+-", 350, 150);
    ctx.font = "32px 'Ubuntu'";
    ctx.fillText("Ubuntu", 10, 200);
    ctx.fillText("AGCDEFGHIJKLMN 12345+-", 350, 200);
    ctx.font = "32px 'Times'";
    ctx.fillText("Times", 10, 250);
    ctx.fillText("AGCDEFGHIJKLMN 12345+-", 350, 250);
    }
    </script>
    </head>
    <body>
    <canvas id='canvas' style="border:solid 1px;font-family:Ewert;" width="850" height="300"></canvas>
    </body>
    </html>

    FontがそろうとWebFontConfig中の'active:'が呼ばれ,activeに記述しておいたpaint関数を呼ぶ.


  • ということで繰り返し描かせるのでなく,Fontファイルがそろった所で一回だけ描画を実行するだけで,動作させることが出来た(WebFont Loaderが使える場合).
  • CSSファイル(おそらく外部からアクセス可能なURLで提供されていることが条件)の追加でWebFontsを指定することができるならWebFont Loaderが利用できるらしい(詳しくは参考ページの'Specifying providers and fonts'を参考してください.項目の一番最後にCSSファイルを自分で指定する方法があります).
  • 0 件のコメント: