Canvas 勉強中のメモその4

今回のお題はテキストです。

Canvas によるテキストの描画について調べてみます。

また、Canvasでは、HTML5で文字を表示する機能に関して規定されているものの、2008年7月18日現在では、それに対応するブラウザはありません（Firefoxでは独自メソッドで文字を描画可能です。）。もし文字を表示したい場合、現状では、Canvasではなく、DOMを使って、文字を含んだ要素（DIVなど）を生成し、Canvasで描かれた図に重ねるように座標を指定して表示させる必要があります。

なるほど、残念。

「DOMを使って、文字を含んだ要素（DIVなど）を生成」
ってどうやるんだろうとGoogle検索。

あちこち調べた結果、最初にみたHTML5.jpさんに戻りました。
レーダーチャートのソースが一番分かりやすかったです。

レーダーチャート - JavaScript ライブラリー - HTML5.JP

html5jp.graph.radar.prototype._drawText = function(x, y, text, font_size, font_family, color) {
var div = document.createElement('DIV');
div.appendChild( document.createTextNode(text) );
div.style.fontSize = font_size;
div.style.fontFamily = font_family;
div.style.color = color;
div.style.margin = "0";
div.style.padding = "0";
div.style.position = "absolute";
div.style.left = x.toString() + "px";
div.style.top = y.toString() + "px";
this.canvas.parentNode.appendChild(div);
}

やりたいことがそのまま関数化されています。ビンゴ。

さっそくテキストを画像として描画してみます。

できました。
ソースは右クリックでどうぞ。

次回は画像の表示、拡大縮小あたりを勉強しようと思います。