CanvasRenderingContext2D.textBaseline

Canvas 2D API の CanvasRenderingContext2D.textBaseline プロパティは、テキストを描画するときに用いられる現在のテキストのベースライン (基準線) を指定します。

構文

ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";

オプション

指定可能な値:

top

テキストベースラインは em square 一辺が 1 em の正方形  の上になります。

hanging

テキストベースラインは hanging ベースラインになります。

middle

テキストベースラインは em square の真ん中になります。

alphabetic

テキストベースラインは標準的な alphabetic ベースラインになります。

ideographic

テキストベースラインは ideographic ベースラインになります。つまり、これは文字の主要な本体が alphabetic ベースラインの下からはみ出る場合、文字の本体の下になります。

bottom

テキストベースラインは bounding box の下になります。これは ディセンダー (descenders) グリフのうちベースラインより下の部分。を考慮しない ideographic ベースラインとは異なります。

デフォルト値は alphabetic です。

例

textBaseline プロパティの使用例

さまざまなベースライン設定を行うために textBaseline プロパティを使用する、シンプルなコードスニペットです。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="編集" />
  <input id="reset" type="button" value="リセット" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

仕様

ブラウザ実装状況

関連情報

• このメソッドを定義するインターフェイスである CanvasRenderingContext2D