Linia tekstu

Linię tekstu ‘textBaseline’ można ustawić dla języków:

  • ‘hanging’ – dla sanskrytu
  • ‘ideografic’ – dla języków takich jak chiński czy japoński
  • ‘alphabetic’ – dla języków z alfabetem łacińskim – linia
    przebiegająca pod małymi literami, np. o, m, r.

W obrębie języka można ustawić:

  • ‘top’ – linia nad tekstem dotykająca do najwyższego elementu
    tekstu.
  • ‘middle’ – linia przebiegająca przez środek tekstu
  • ‘bottom’ – linia pod tekstem dotykająca do najniższego
    elementu tekstu

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

var cv = document.getElementById("canvas");
		var ctx = cv.getContext("2d");
		var tekst = 'Frog';
		ctx.font = '50px arial';
		ctx.fillStyle = 'blue';
		ctx.fillText(tekst, 10, 50);
		var metryka = ctx.measureText(tekst);
		var width = metryka.width;
		ctx.font = '20px arial';
		ctx.fillStyle = "black";
		ctx.textBaseline = "alphabetic";
		ctx.font = "50px arial";
		ctx.fillStyle = "blue";
		ctx.textBaseline = "bottom";
		ctx.fillText(tekst, 136, 50);
		ctx.textBaseline = "middle";
		ctx.fillText(tekst, 262, 50);
		ctx.textBaseline = "top";
		ctx.fillText(tekst, 388, 50);
		ctx.lineWidth=1;
		ctx.beginPath();
		ctx.moveTo(10, 51);
		ctx.lineTo(530, 51);
		ctx.stroke();
		ctx.fillStyle = "#afafaf";
		ctx.font = "12px Arial";
		ctx.fillText("alphabetic", 40, 60);
		ctx.fillText("bottom", 176, 60);
		ctx.fillText("midle", 302, 70);
		ctx.fillText("top", 438, 100);	
            

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *