いードットぷりんとすたっくとれーす: 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ファイルを自分で指定する方法があります)．

いードットぷりんとすたっくとれーす

2012年2月21日火曜日

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

0 件のコメント: