そのほかの canvas の操作

カテゴリ:programming

テキスト操作

テキスト操作の基本については [69-8] canvasでテキストを描画しよう を参照.

テキストの折り返し

標準には用意されていないので,measureText を使って実装する. ただし高さを取得する方法はない(2016/5月現在)ので,手動で調整する. 折り返しは以下のようになる.

  1. measureText でレンダリングに必要な横幅を取得
  2. 横幅を文字数で割り,一文字当たりの幅を計算
  3. 画面もしくはテキストボックスの幅を一文字当たりの幅で割り,一行あたりの文字数を計算
  4. 文字数を一行あたりの文字数で割り行数を計算

ただしこの方法はフォントが等幅であることを仮定している. 等幅でない場合,枠をはみ出すことがある. その時は charWidthPx に 0.8 ぐらいを掛けて調整する必要があるかもしれない.

画像の描画

基本については以下の記事を参照.

画像を組み込む

[69-4] canvasに画像を描画しよう(トリミングやクリッピングも)

[69-7] canvas上の重なった描画領域を指定しよう(globalCompositeOperationプロパティ)

画像の透過

画像に PNG を使えば透過画像も扱える.

canvas の保存

toDataURL を使う.