Firefox 3.1のHTML 5対応を検証--Canvas Text APIとCanvas Shadow API
前回に引き続き、Firefox 3.1でサポートが追加される予定のHTML 5におけるCanvas機能を紹介する。
Canvas上のテキストの垂直/水平位置を設定する
Canvas Text APIで追加されるプロパティのうち、残る2つのプロパティであるtextBaselineとtextAlignは、それぞれテキストの垂直および水平位置を決定するために使用される。
まずtextBaselineプロパティでは、top、hanging、middle、alphabetic、ideographic、bottomのいずれかを使用してテキストのベースラインを指定できる。デフォルトはalphabeticになっている。HTML 5のドラフトでは、それぞれ図1の位置を表すとしている。
リスト1は、textBaselineプロパティの値をデフォルト(alphabetic)、top、middleと指定し、それぞれ色を変えて描画した例である。 これをFirefox 3.1 Alpha 1で表示すると図2のようになり、垂直位置が変更されているのがわかる。
なお、ソースコードの全容は前回の記事「Firefox 3.1で強化されるHTML 5対応--Canvas Text APIを検証」を参照していただきたい。
リスト1 テキストの垂直位置を指定
// 2Dコンテキストを取得
var ctx = canvas.getContext('2d');
var str = "Welcome to the new world, sir.";
ctx.font = "32px Serif";
// 直線を描く
ctx.strokeStyle = "Silver";
ctx.beginPath();
ctx.moveTo(0, 40);
ctx.lineTo(450, 40);
ctx.closePath();
ctx.stroke();
// テキストの描画
ctx.fillStyle = "Red";
ctx.fillText(str, 20, 40);
ctx.textBaseline = "top";
ctx.fillStyle = "Blue";
ctx.fillText(str, 20, 40);
ctx.textBaseline = "middle";
ctx.fillStyle = "Green";
ctx.fillText(str, 20, 40);
水平位置はtextAlignプロパティで指定する。textAlignに指定できる値はstart、end、left、right、centerのいずれかで、これによってテキストのアンカーポイントがインラインボックスのどの位置になるかが決定される。
例えばleftやstart(かつcanvas要素のdirectionプロパティのコンビューテッド値がltr)ならば左端となり、rightやend(かつcanvas要素のdirectionプロパティのコンビューテッド値がltr)ならば右端、centerならば真ん中となる。デフォルトはstartとなっている。
リスト2は、textAlignプロパティの値をデフォルト(start)、center、endと指定し、それぞれ色を変えて描画した例である。これをFirefox 3.1 Alpha 1で表示すると図3のようになり、水平位置が変更されているのがわかる。
リスト2 テキストの水平位置を指定
// 2Dコンテキストを取得
var ctx = canvas.getContext('2d');
var str = "Welcome to the new world, sir.";
ctx.font = "32px Serif";
// 直線を描く
ctx.strokeStyle = "Silver";
ctx.beginPath();
ctx.moveTo(300, 0);
ctx.lineTo(300, 140);
ctx.closePath();
ctx.stroke();
// テキストの描画
ctx.fillStyle = "Red";
ctx.fillText(str, 300, 40);
ctx.textAlign = "center";
ctx.fillStyle = "Blue";
ctx.fillText(str, 300, 80);
ctx.textAlign = "end";
ctx.fillStyle = "Green";
ctx.fillText(str, 300, 120);
- 0人の推薦記事
- 0人がクリップ
-
ソーシャルブックマーク(-)
- トラックバック(0)
-
- タグ
- オフセット
- ドラフト
- ベースライン
- テキスト
- アンカーポイント
- ブラウザ
- サポート
- プロパティ
- Gecko
- Safari
- HTML
- color
- 2Dコンテキスト
- shadowBlur
- shadowColor
- shadowOffsetX
- shadowOffsetY
- Gecko 1.9.1
- 影
- stroke
- fill
- Safari 3.1.2
- hanging
- middle
- alphabetic
- ideographic
- bottom
- Firefox 3.1 Alpha 1
- start
- end
- left
- right
- center
- インラインボックス
- direction
- コンビューテッド値
- ltr
- Canvas Shadow API
- 垂直
- 水平
- top
- Canvas Text API
- textBaseline
- textAlign
- Firefox 3.1
- Canvas
- Safari 3
- Webデザイン
- HTML 5
- Firefox 3
- 特集: 開発者のFirefox 3 (69件)
- 今日のトップ記事
- 昨日
- 5日前
- 6日前
- 7日前
- ホワイトペーパー
- 話題のタグ



「Google Chrome」の拡張機能、開発者からのアップロード受付を開始
IMAPでGmailを受信、最も手っ取り早いのは?Windows 7、Ubuntu 9.10、Snow Leopardのメーラー比較
Snow LeopardではNTFSをサポート--その源流を訪ねる(2)
MS運営のオープンソース開発プロジェクト支援サイト「CodePlex」を探検する(2)
Snow LeopardではNTFSをサポート--その源流を訪ねる(1)
フォトレポート:「Windows Server 2008 R2」--あまり知られていない有用な機能10選
【最終警告】パンデミック対策特集
100万円で実現!中小企業の情報漏えい対策
電力に"ふた"をする独自の省エネ機能とは!?
大丈夫?あなたの会社のセキュリティ対策
高まるiSCSIストレージへの注目度
―エン・ジャパン厳選求人☆毎週更新―
企業ITシステムの企画、構築、運用のイロハ