SYNCERのロゴ
アイキャッチ画像

テキストを描く方法

Canvasでテキストを描くには、コンテキストのfillText()を利用しましょう。

サンプルコード

「SYNCER」というテキストを描画するサンプルコードです。フォントの種類と、テキストが描画される範囲(位置とサイズ)を指定します。サイズは省略可能です。サイズを狭めると、横幅が足りない場合に文字が縮まります。テキストはエリアの上部に描かれるため、垂直位置はフォントサイズ分だけ下にずらすようにしましょう。

// element = <canvas width="200" height="200"></canvas>
var context = element.getContext( "2d" ) ;

// パスをリセット
context.beginPath () ;

// フォントを設定
context.font = "bold 24px Arial, meiryo, sans-serif" ;

// テキストの色
context.fillStyle = "rgba( 255, 0, 0, 0.8 )" ;

// 位置(0,24)からサイズ(200,100)の範囲にテキストを描画する
context.fillText( "SYNCER", 0, 24, 200, 100 ) ;

デモ

テキストや座標などを変更して、どのように反映されるか確認してみて下さい。

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

context.beginPath () ;
context.font = "bold 24px Arial, meiryo, sans-serif" ;
context.fillStyle = "rgba( 255, 0, 0, 0.8 )" ;
context.fillText( "SYNCER", 0, 24, 200, 100 ) ;

200x200のキャンパスです。

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月3日 (木)
コンテンツを公開しました。