HTML5のCanvas 2DのAPIを利用して文字列を描く
HTML（ハイパー・テキスト・マークアップ言語）の最新の仕様であるHTML5にはCanvasという要素がある。この要素を利用すると、画像ファイルやFlash playerやJavaアプレットなどに頼らず、HTMLとCSSとJavaScriptだけで図形やアニメーションをウェブ・ページ上に描画することができるらしい。
必要なものはHTML5とCSSとJavaScriptに対応しているウェブ・ブラウザである。世界的に普及している主要なウェブ・ブラウザ（Google Chrome, Firefox, Opera, Safariなど）の最新版をインストールしていれば、基本的なことはできるようだ。
下準備
最初に、Canvas要素を埋め込んだHTML文書（.htmlという拡張子を持つテキストファイル）を作成した。HTMLはHTML5の仕様に則って記述した。そのファイルの内容は次のとおり。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvasを学ぶ</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <canvas id="canvas_letter" width="380" height="120"> あなたのブラウザはCanvas要素に対応していません。 </canvas> <script type="text/javascript" src="canvas_letter.js"></script> </body> </html>
canvas要素のid属性で指定した名前はJavaScriptのソースコードから参照するために使われるもの。canvas要素のwidthとheightでCanvasの描画範囲の大きさを指定した。widthが幅でheightが高さ。script要素を記述し、そのsrc属性にJavaScriptのソースファイル名を指定した。このファイルにJavaScriptでコードを記述してこのcanvas要素を制御する。
link要素で指定したstyle.cssファイルの中身は次のとおり：
canvas {
border:2px solid black;
}
HTML5 Canvas 2Dで文字を描画してみる
ここでは、HTML Canvas 2D ContextというAPIを利用して2次元のグラフィックスを描画してみる。そのためにまずエディタを起動し、canvas_letter.jsというファイル名でhtmlファイルと同じディレクトリに保存した。canvas_letter.jsには次のとおりにJavaScriptの構文を記述した。
var canvas = document.getElementById("canvas_letter");
var context = canvas.getContext("2d");
varは変数の宣言を示す予約語で、canvasやcontextという変数を用意した。=は代入演算子で、右辺を左辺の変数に代入する役目を果たす。構文の最後の;を忘れないこと。
ここではdocumentオブジェクトのgetElementById()というメソッドを使って先ほど指定しておいたcanvas_sample1という名のidを持った要素を取得し、それをcanvasという変数に代入した。２行目ではgetContext()メソッドを使ってCanvasRenderingContext2Dオブジェクトを得てcontextという変数に代入した。これでHTML Canvas 2D Context, Level 2のAPIを利用する準備ができた。
文字列の描画コード
HTML Canvas 2D Context, Level 2のAPIを使って文字列（テキスト）を描画するコードは下のとおり。
// canvas要素を取得
var canvas = document.getElementById("canvas_letter");
// HTML Canvas 2Dを使えるようにする
var context = canvas.getContext("2d");
// 文字列の描画
// フォントを設定
context.font = 'oblique bold 35px "ＭＳ Ｐ明朝", sans-serif';
// 枠線の色を設定
context.strokeStyle = "#000";
// 文字の水平位置を設定
context.textAlign = "start";
// 文字の垂直位置を設定
context.textBaseline = "middle";
// 枠線だけの文字を描画、(文字列, x軸, y軸, 最大幅)
context.strokeText("やあ キャンバス", 10, 30, 500);
// 塗りつぶしの色を設定
context.fillStyle = "#f0f";
// x軸方向の影を設定する
context.shadowOffsetX = 3;
// y軸方向の影を設定する
context.shadowOffsetY = 3;
// 影のぼかしのレベルを設定する
context.shadowBlur = 2;
// 影の色を設定する
context.shadowColor = "#000000";
// 塗りつぶしの文字を描画、(文字列, x軸, y軸, 最大幅)
context.fillText("今日の調子はどうだい", 5, 80, 500);
フォントの設定はCSSのfontプロパティのように設定する。左から、太字、サイズ、フォント名。水平位置はstart, end, left, right, centerから選べる。centerがデフォルト。垂直位置はtop, hanging, middle, ideographic, bottom, alphabeticの中から選べる。alphabeticがデフォルト。fillText()とstrokeText()メソッドの引数は共に("文字列", x軸, y軸, 最大幅)の順。影の設定のためのプロパティのデフォルト値はいずれも0。
結果はこのようになった。
コードの記述の順番も重要で、影の設定は2行目の文字列「今日の調子はどうだい」にのみ反映されていた。後に描画したものが前に来て、先に描画したものが背景に来た。プロパティの値を変えたり、メソッドの引数の値を変えたり、コードの記述の順番を変えたりしていろいろ試してみると面白い。
まとめ
- font
- 用いるフォントを指定する。
- strokeStyle
- 線の色などのスタイルを指定する。
- textAlign
- 文字列の水平方向の位置を指定する。"start", "end", "left", "right", "center"のうちから選択する。
- textBaseline
- 文字列の垂直方向の位置を指定する。"top", "hanging", "middle", "alphabetic", "ideographic", "bottom"のうちから選択する。
- strokeText("text", x, y, xw)
- 枠線だけの文字列を描く。"text"に文字列を、xとyで座標を、xwで最大の幅を指定する。xwはオプション。座標系はCanvasの左上端が(0,0)となる。
- fillText("text" , x, y, xw)
- 塗りつぶした文字列を描く。"text"に文字列を、xとyで座標を、xwで最大の幅を指定する。xwはオプション。座標系はCanvasの左上端が(0,0)となる。
- fillStyle
- 塗りつぶしの色などのスタイルを指定する。
- shadowOffsetX
- x軸方向の影の長さを指定する。
- shadowOffsetY
- y軸方向の影の長さを指定する。
- shadowBlur
- 影のぼかし度を数値で指定する。
- shadowColor
- 影の色を指定する。
コメント
コメントを投稿