HTML -doekteksBaseline Eiendom

❮ HTML-doekverwysing

Voorbeeld

Trek 'n rooi lyn by y=100, plaas dan elke woord by y=100 met verskillende teksGrondlynwaardes:

Jou blaaier ondersteun nie die HTML5-skerm nie.

JavaScript:

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

//Draw a red line at y = 100
ctx.strokeStyle = "red";
ctx.moveTo(5, 100);
ctx.lineTo(395, 100);
ctx.stroke();

ctx.font = "20px Arial"

//Place each word at y = 100 with different textBaseline values
ctx.textBaseline = "top";
ctx.fillText("Top", 5, 100);
ctx.textBaseline = "bottom";
ctx.fillText("Bottom", 50, 100);
ctx.textBaseline = "middle";
ctx.fillText("Middle", 120, 100);
ctx.textBaseline = "alphabetic";
ctx.fillText("Alphabetic", 190, 100);
ctx.textBaseline = "hanging";
ctx.fillText("Hanging", 290, 100);

Blaaierondersteuning

Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.

Property
textBaseline Yes 9.0 Yes Yes Yes

Let wel: Die textBaseline-eienskap werk verskillend in verskillende blaaiers, veral wanneer "hang" of "ideographic" gebruik word.


Definisie en gebruik

Die textBaseline-eienskap stel of gee die huidige teksbasislyn terug wat gebruik word wanneer teks geteken word.

Die illustrasie hieronder demonstreer die verskillende basislyne wat deur die textBaseline-kenmerk ondersteun word:

teksGrondlyn illustrasie

Let wel: Die fillText()- en strokeText()- metodes sal die gespesifiseerde textBaseline-waarde gebruik wanneer die teks op die doek geplaas word.

Standaard waarde: alfabeties
JavaScript-sintaksis: context .textBaseline="alfabeties|bo|hangende|middel|ideografiese|onder";

Eiendomswaardes

Values Description Play it
alphabetic Default. The text baseline is the normal alphabetic baseline
top The text baseline is the top of the em square
hanging The text baseline is the hanging baseline
middle The text baseline is the middle of the em square
ideographic The text baseline is the ideographic baseline
bottom The text baseline is the bottom of the bounding box

❮ HTML-doekverwysing