HTML5プログラミング -文字表示について-

◇HTML5プログラミング -文字表示について-

HTMLなので，普通に書けば表示されます

<body>
日本語でOK
</body>

ですが，この方法では画像の上にテキストウィンドウが表示できません
もっと画面上の自由な位置に文字を表示したいです

Canvasを使えば簡単にできます
HTMLで，サイズを指示します。それと bodyタグで最初に実行する JavaScript関数を指定します

<body onload="run()">
<canvas id="karunaCanvas" width="320" height="480"></canvas>
</body>

JavaScriptで，canvasを生成します（実際にはそうではありませんが，そう考えた方が簡単です）

<script>
var canvas;
var context;

function run(){
	canvas=document.getElementById("karunaCanvas")
	context=canvas.getContext("2d");


	context.fillText("日本語でOK", 100, 100);
}
</script>

この fillTextメソッドは，
context.fillText("「文字列」", 「Ｘ座標」, 「Ｙ座標」);
です

文字サイズの変更方法は，文字表示前に fontメソッドで指定します

	context.font = "22px sans-serif";

sans-serifの部分はフォント名なのですが，sans-serifとか Arialとか書いておくと，ブラウザが予期に計らってくれます（ぉ

○TOP○プログラマ専用○HTML5プログラミング○