[ Leksykon ] [ JavaScript ] [ Właściwości ] [ canvas ] [ TextMetrics() ]

TextMetrics.hangingBaseline

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

Przykłady: 

<script>

 window.onload = () => {

 const szer = 300;
 const wys = 400;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d"); 

 let tekst = ctx.measureText("Witaj!");
 console.log(tekst.width); // 25

 console.log(tekst.actualBoundingBoxAscent); // 7
 console.log(tekst.actualBoundingBoxDescent); // 2
 console.log(tekst.actualBoundingBoxLeft); // 1
 console.log(tekst.actualBoundingBoxRight); // 25.2216796875
 console.log(tekst.alphabeticBaseline); // undefined
 console.log(tekst.emHeightAscent); // undefined
 console.log(tekst.emHeightDescent); // undefined
 console.log(tekst.fontBoundingBoxAscent); // 9
 console.log(tekst.fontBoundingBoxDescent); // 2
 console.log(tekst.hangingBaseline); // undefined

 ctx.font = "50px serif";
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.fillText(tekst.hangingBaseline, 50, 50);

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>

Opis:
Właściwość TextMetrics.hangingBaseline do odczytu TextMetrics polega na double podaniu odległości od linii poziomej wskazanej przez CanvasRenderingContext2D.textBaseline właściwość do wiszącej linii bazowej ramki liniowej, w pikselach CSS.

Zobacz też:
canvas textBaseline - Ustawienie wyrównania linii bazowej, wartości: top, hanging, middle, alphabetic, ideographic, bottom
canvas measureText() - Zwraca TextMetrics obiekt, z właściwościami tekstu
DOMMatrix -