canvasに文字を描画する

canvasにテキストを描画するには、以下のプロパティ、メソッドを使います。

メソッド・プロパティ	内容
font	フォントを指定
textAlign	表示位置の指定 left/center/right
textBaseline	テキストのベースラインを指定 位置は上からtop/hanging/middle/alphabetic/ideographic/bottomの順。
fillText(text, X, Y)	塗りつぶしテキストを描画
fillText(text, X, Y, Width)	塗りつぶしテキストを描画
strokeText(text, X, Y)	線でテキストを描画
strokeText(text, X, Y, Width)	線でテキストを描画

マウスを乗せると文字を描画します。

---

---

---

<canvas id="drawTextCanvas1" onmouseover="drawText1();" width="400" height="400">
</canvas>
<script language="javascript" type="text/javascript">
function drawText1() {
    var c = document.getElementById("drawTextCanvas1");
    var context = c.getContext("2d");
    var text = "Baseline=top";
    context.font = "1em 'Georgia'";
    context.lineWidth = 1;
    context.fillStyle = "#1212FF";
    context.strokeStyle = "#0000FF";
    context.textBaseline = "top";
    context.fillText (text, 80, 50);
    context.beginPath();
    context.moveTo(80, 50);
    context.lineTo(320, 50);
    context.stroke();

    text = "Baseline=hanging";
    context.textBaseline = "hanging";
    context.fillText(text, 80, 100);
    context.beginPath();
    context.moveTo(80, 100);
    context.lineTo(320, 100);
    context.stroke();

    text = "Baseline=middle";
    context.textBaseline = "middle";
    context.fillText(text, 80, 150);
    context.beginPath();
    context.moveTo(80, 150);
    context.lineTo(320, 150);
    context.stroke();

    text = "Baseline=alphabetic";
    context.textBaseline = "alphabetic";
    context.fillText(text, 80, 200);
    context.beginPath();
    context.moveTo(80, 200);
    context.lineTo(320, 200);
    context.stroke();

    text = "Baseline=ideographic";
    context.textBaseline = "ideographic";
    context.fillText(text, 80, 250);
    context.beginPath();
    context.moveTo(80, 250);
    context.lineTo(320, 250);
    context.stroke();

    text = "Baseline=bottom";
    context.textBaseline = "bottom";
    context.fillText(text, 80, 300);
    context.beginPath();
    context.moveTo(80, 300);
    context.lineTo(320, 300);
    context.stroke();

    text = "縁取り文字";
    context.font = "2em 'Georgia'";
    context.strokeText(text, 80, 350);
    context.beginPath();
    context.moveTo(80, 350);
    context.lineTo(320, 350);
    context.stroke();
}
</script>

---