HTML5 Canvas で縦書き対応してみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

vertical-writing

Pocket

表題の通り, HTML5 Canvas で縦書き対応してみました.

友人からずっと『tmlib.js で縦書き対応してくれ〜』って言われていたのですが, 自分が使う機会がなかったので実装渋ってました.

ごめんなさい.

割とサクッとやれたので解説がてらサンプル載せておきます.

tmlib.js は次のバージョン(0.1.6)から対応版リリース予定です. 近々リリースします!!

Table of contents

HTML5 Canvas 縦書きデモ

up

HTML5 Canvas 縦書きする方法

縦書き描画の実装は下記のコードになります. tategakiという関数を実装しています.(ローマ字でごめんなさい, 良い感じの名前が思いつかなかったのでw)

var tategaki = function(context, text, x, y) {
  var textList = text.split('\n');
  var lineHeight = context.measureText("あ").width;
  textList.forEach(function(elm, i) {
    Array.prototype.forEach.call(elm, function(ch, j) {
      context.fillText(ch, x-lineHeight*i, y+lineHeight*j);
    });
  });
};

フローは下記の流れになります.

  1. 引数で渡された text を \n で分割
  2. HTML5 Canvas の measureText で文字の1文字の幅を取得
  3. forEach で一行ごとに処理を行う
  4. 一行をさらに forEach で一文字ずつ取得
  5. 2 で取得した文字幅ずつy座標をズラしながら文字を描画する
  6. 改行ごとに x 座標をズラす

実際の使い方はこちら

/*
 * @author phi_jp
 */

window.onload = function() {
  var canvas = document.getElementById("world");
  var context= canvas.getContext("2d");
  context.font = "16px 'メイリオ'";
  
  var text = "こんにちは\n世界は広いですねぇ";
  tategaki(context, text, 150, 50);
};

これで縦書き描画できます.

up

他にも『tmlib.js で対応してくれ』って要望や 『HTML5 Canvas でこんなことできない?』って質問など ありましたら気軽に @phi_jp までご連絡ください.

非力ながら一緒に考えるぐらいはできるかと思います.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT