[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.textBaseline

[_] [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 = 600;
 const wys = 300;
 
 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");

 const tablica = [
 "top",
 "hanging",
 "middle",
 "alphabetic",
 "ideographic",
 "bottom",
 ];

 ctx.strokeStyle = "blue";
 ctx.font = "18px serif";

 tablica.forEach((linia, index) => {
 ctx.textBaseline = linia;
 const y = 45 + index * 45;
 ctx.beginPath();
 ctx.moveTo(0, y + 0.8);
 ctx.lineTo(300, y + 0.8);
 ctx.stroke();
 ctx.fillText(`baselines ABC "${linia}"`, 0, y);
 });
 
 };

</script>
 
<canvas id="canvas" width="1" height="1"></canvas>

Opis:
Właściwość CanvasRenderingContext2D.textBaseline określa bieżącą linię bazową tekstu używaną podczas rysowania tekstu. Wartość "top" - linia bazowa tekstu znajduje się na górze kwadratu, "hanging" - linia bazowa tekstu to wisząca linia bazowa, używany w pismach tybetańskich i innych pismach indyjskich, "middle" - linia bazowa tekstu znajduje się na środku kwadratu, "alphabetic" - linią bazową tekstu jest normalna linia bazowa alfabetu, domyślna wartość, "ideographic" - linia bazowa tekstu jest linią bazową ideograficzną, jest to dół korpusu znaków, jeśli główny korpus znaków wystaje poniżej alfabetycznej linii bazowej, używany w pismach chińskich, japońskich i koreańskich, "bottom" - linią bazową tekstu jest dół obwiedni, różni się to od ideograficznej linii bazowej tym, że ideograficzna linia bazowa nie uwzględnia elementów dolnych. Wartość domyślna to "alphabetic".

Zobacz też: