CanvasRenderingContext2D: textBaseline-Eigenschaft

Wert

Mögliche Werte:

"top"

Die Textbasislinie ist die Oberseite des em-Quadrats.

"hanging"

Die Textbasislinie ist die hängende Basislinie. (Wird bei tibetischen und anderen indischen Schriften verwendet.)

"middle"

Die Textbasislinie ist die Mitte des em-Quadrats.

"alphabetic"

Die Textbasislinie ist die normale alphabetische Basislinie. Standardwert.

"ideographic"

Die Textbasislinie ist die ideografische Basislinie; dies ist der untere Teil des Körpers der Zeichen, wenn der Hauptteil der Zeichen unter der alphabetischen Basislinie hervorragt. (Wird bei chinesischen, japanischen und koreanischen Schriften verwendet.)

"bottom"

Die Textbasislinie ist die Unterseite des Begrenzungsrahmens. Dies unterscheidet sich von der ideografischen Basislinie, da die ideografische Basislinie keine Unterlängen berücksichtigt.

Der Standardwert ist "alphabetic".

Beispiele

Vergleich von Eigenschaftswerten

Dieses Beispiel demonstriert die verschiedenen textBaseline-Eigenschaftswerte.

HTML

<canvas id="canvas" width="550" height="500"></canvas>

JavaScript

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

const baselines = [
  "top",
  "hanging",
  "middle",
  "alphabetic",
  "ideographic",
  "bottom",
];
ctx.font = "36px serif";
ctx.strokeStyle = "red";

baselines.forEach((baseline, index) => {
  ctx.textBaseline = baseline;
  const y = 75 + index * 75;
  ctx.beginPath();
  ctx.moveTo(0, y + 0.5);
  ctx.lineTo(550, y + 0.5);
  ctx.stroke();
  ctx.fillText(`Abcdefghijklmnop (${baseline})`, 0, y);
});

Ergebnis

Vergleich von Eigenschaftswerten auf derselben Linie

Wie im vorherigen Beispiel demonstriert auch dieses Beispiel die verschiedenen textBaseline-Eigenschaftswerte, jedoch in diesem Fall alle horizontal auf derselben Linie — um es einfacher zu machen, zu sehen, wie sie sich voneinander unterscheiden.

HTML

<canvas id="canvas" width="724" height="160"></canvas>

JavaScript

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

const baselines = [
  "top",
  "hanging",
  "middle",
  "alphabetic",
  "ideographic",
  "bottom",
];
ctx.font = "20px serif";
ctx.strokeStyle = "red";

ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(840, 100);
ctx.moveTo(0, 55);
ctx.stroke();

baselines.forEach((baseline, index) => {
  ctx.save();
  ctx.textBaseline = baseline;
  let x = index * 120 + 10;
  ctx.fillText("Abcdefghijk", x, 100);
  ctx.restore();
  ctx.fillText(baseline, x + 5, 50);
});

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Schnittstelle, die diese Eigenschaft definiert: CanvasRenderingContext2D