HTML5 Canvas-テキストとフォント

HTML5キャンバスは、以下にリストされている異なるフォントおよびテキストプロパティを使用してテキストを作成する機能を提供します-

Sr.No.	Property and Description
1	font [ = value ] このプロパティは現在のフォント設定を返し、設定してフォントを変更できます。
2	textAlign [ = value ] このプロパティは現在のテキストの配置設定を返し、設定して配置を変更できます。可能な値は、start、end、left、right、およびcenterです。
3	textBaseline [ = value ] このプロパティは、現在のベースライン配置設定を返し、設定してベースライン配置を変更できます。可能な値は、top、hanging、middle、alphabetic、ideideographic、およびbottomです。
4	fillText(text, x, y [, maxWidth ] ) このプロパティは、指定された座標xおよびyで示される指定された位置で、指定されたテキストを塗りつぶします。
5	strokeText(text, x, y [, maxWidth ] ) このプロパティは、指定された座標xとyで示される指定された位置で指定されたテキストをストロークします。

例

以下は、上記の属性を使用してテキストを描画する簡単な例です-

<!DOCTYPE HTML>

<html>
   <head>

      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>

      <script type = "text/javascript">
         function drawShape() {

           //get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');

           //Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {

              //use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');

               ctx.fillStyle = '#00F';
               ctx.font = 'Italic 30px Sans-Serif';

               ctx.textBaseline = 'Top';
               ctx.fillText('Hello world!', 40, 100);

               ctx.font = 'Bold 30px Sans-Serif';
               ctx.strokeText('Hello world!', 40, 50);
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>

   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>

</html>

上記の例では、次の結果が生成されます-

Html5-canvas-text-fonts

HTML5 Canvas-テキストとフォント

例