2013年2月11日月曜日

Canvasでline-heightは無視される

HTML5 の Canvas では行の高さを指定できません。CSS の font と同じように指定できると説明されていますが、line-height に相当する数値は無視されるので注意が必要です。

enchant.js のメッセージ表示部分で行の高さが反映されず詰まりました。



// テキスト表示部分の処理は省略しています
var message = 'Where is a pig! I am very hungry... Give me a pig!';
var label = new Label();
label.color = 'black';
label.text = message;

// フォントサイズを75px, 行の高さを75pxに指定するが無視される
label.font = '75px/75px fantasy';

game.currentScene.addChild(message);


Canvas APIの仕様では line-height に相当する値は 'normal' に固定されるようです。
配列を利用して1行ずつ手動で行間を開けることにしました。


var messages = [
    'Where is a pig!',
    'I am very hungry...',
    'Give me a pig!'
];
for(var i = 0; i < messages.length; i++) {
    var label = new Label();
    label.color = 'black';
    label.text = message;
    label.font = '75px fantasy';
    label.y = 75 * i;  // 手動で高さを調整
    game.currentScene.addChild(message);
}

参考
- W3C HTML Canvas 2D Context, Level 2 Nightly 
http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#text-styles

0 件のコメント:

コメントを投稿