ホーム > Canvas関連 > 【Canvas】テキストの左上座標を指定して描画する方法

【Canvas】テキストの左上座標を指定して描画する方法

mixiチェック Clip to Evernote このエントリーをはてなブックマークに追加

今回はHTML5 Canvas要素にて、描画したいテキストを矩形とみなした場合にその左上の座標を指定して描画する方法です。

デフォルトでは左上ではないので困った方はどうぞ。


通常、Canvas上でテキストを描画する場合に、なんか上下が微妙にずれて表示されるといったことがある場合、大抵は以下のようなスクリプトになってると思います。

ctx.fillStyle	= #000000;
ctx.fillText( "Hello, world", 100, 50 );

上のサンプルは、キャンバス上の座標(x, y = 100, 50)上に黒色で"Hello, world"と表示するサンプルです。

この時に、以下の1行を前に挿入すると大丈夫です。

ctx.textBaseline	= "top";
ctx.fillStyle	= #000000;
ctx.fillText( "Hello, world", 100, 50 );

以下サンプルです。

<script type="text/javascript">
<!--
var el = document.getElementById( "demo" );
if ( !el || !el.getContext ) return false;
var ctx = el.getContext( "2d" );
ctx.fillStyle = #cccccc;
ctx.fillRect( 0, 0, 100, 50 );
ctx.textBaseline = "top";
ctx.fillStyle = #000000;
ctx.fillText( "Hello, world", 100, 50 );
//-->
</script>
<canvas id="demo" width="400" height="300" style="width: 400px; height: 300px; background: #fff; border: solid 1px #000;"></canvas>

カテゴリー:Canvas関連
2011/08/15 15:54:43 更新