Canvasによる文字の描画サンプル

Canvasによる文字の描画

HTML5のCanvasを使用して図を表示する場合は、まず図を描く領域を指定します。
このサンプルでは、htmlソース中に以下のように記述しています。

<canvas id="t1" width="320" height="120"></canvas>

CanvasはSVGの様にインラインで記述できず、javascriptで図形を指定して描画する必要があります。htmlを読み込んだ時に自動にjavascriptが実行されるようにwindow.onload = function(){にソースを記述しています。
次にgetElementByIdを使用してCanvasオブジェクトを取得しgetContextメソッドがセットされているかチェックします。
セットされていた場合、Canvas要素よりコンテキストを作成するために、

var ctx = canvas.getContext('2d');

を呼び出します。ctxにコンテキストが返されます。
文字の大きさと種類を指定するためにfontプロパティを指定します。
文字の輪郭の色を指定するためにstrokeStyleプロパティを設定します。
塗りつぶす色の黒を指定するためにfillStyleプロパティを設定します。
塗りつぶされた文字はfillTextで描画します。
輪郭のみの文字はstrokeTextで描画します。

fillText(文字列,x座標,y座標)

塗りつぶされた文字を描画します。

strokeText(文字列,x座標,y座標)

輪郭のみの文字を描画します。

フォント

context.font = "20px serif";
fontプロパティで文字の大きさとフォントの種類を指定できます。

ベースライン

context.textBaseline
textBaselineプロパティで文字の縦の描画位置を指定します。
alphabeticが初期値です。
下図の青線がベースラインを表しています。以下の文字列を指定できます。

位置揃え

context.textAlign
textAlignは水平の基準位置を設定します。青線が指定座標になります。以下の文字列を指定できます。

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
  <canvas id="t1" width="320" height="120">
  </canvas>

  <script type="text/javascript">
    window.onload = function(){
      var canvas1 = document.getElementById('t1');
      if (canvas1.getContext){
        var ctx1 = canvas1.getContext('2d');
        ctx1.font="48px serif";
        ctx1.strokeStyle = 'blue';
        ctx1.fillStyle = 'black';
        ctx1.fillText("fillText",0,50);
        ctx1.strokeText("strokeText",0,100);
      }
    }
  </script>
</body>
</html>

ソースファイルのダウンロード(text.zip)

ページのトップへ戻る

山本ワールド

コンピューター

Canvasによる文字の描画サンプル