Linia tekstu (HTML5 canvas)

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 = 'Dog';
		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);