2012年2月20日月曜日

HTML5 Canvas 2D Context に Web Fonts を用いて fillText してみる

動機
zugaさんのこのpost.

やってみた
Web Fontsとして, Google Web FontsからUbuntuを利用してます．

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
  <script type="text/javascript">
   function init() {
    setInterval(paint, 1000);
   }
   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= 'Ubuntu';//document.defaultView.getComputedStyle(canvas, null).fontFamily;
    ctx.fillStyle= "rgba(0,0,0,255)";
    ctx.font = "32px 'Helvetica'";
    ctx.fillText("Helvetica Ubuntu", 10, 50);
    ctx.font = "32px '"+fontName+"'";
    ctx.fillText("Ubuntu Ubuntu", 10, 100);
    ctx.font = "32px 'Times'";
    ctx.fillText("Times Ubuntu", 10, 150);
   }
  </script>
 </head>
 <body onload="init();">
  <canvas id='canvas' style="border:solid 1px;font-family:Ubuntu;" width="400" height="300"></canvas>
 </body>
</html>

  • Google Web Fontsでは, link要素でCSSを取得させる(script要素での方法も用意されている)．CSS内にWebFontsのfontファイルのurlが記載されている.
  • Web Font(s)のロード時間の都合かonload時に描画させると描画されないケースが発生するので繰り返し描画させている.

    • では本文中にwebfontsで要求するfontを利用すればonload時1回の指定でも問題ないのか?ということで試してみるとFirefox 10.0.2は，この期待に応えてくれたが，Safari 5.1.3 /Chrome 17.0.963.56ではダメだった(描画されない)．



結果


HelveticaとTimes以外はGoogleWebFontsを使用





参考
  • How to Use Google Web Fonts in your HTML5 Canvas | Ascended Arcade
  • 第4回 CSS3のWebフォントを使ってみよう | Think IT
    • 投稿者
    ラベル: ,

    0 件のコメント:

    コメントを投稿

    登録: コメントの投稿 (Atom)