خاصية textBaseline لـ HTML canvas

دليل مرجعي لـ HTML5 Canvas

التعريف والاستخدام

يحدد أو يعيد خاصية textBaseline القيمة الحالية للنص عند الرسم.

الشكل التالي يوضح أنواع الجسور التي يدعمها خاصية textBaseline:

رسومات خط الأساس

التعليقات:fillText() أو strokeText() عند تحديد موقع النص على الرسم البياني، سيتم استخدام قيمة textBaseline المحددة.

مثال

تحديد مستطيل ملون باللون الأزرق

browser الخاص بك لا يدعم علامة canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//رسم خط أزرق في موقع y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//توضع كل كلمة في y=200 بقيمة textBaseline المختلفة
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);

تجربة شخصية

النحو

سياق.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

قيمة الخاصية

القيمة الوصف
alphabetic الافتراضي. خط النص هو القاعدة العادية للحروف.
top خط النص هو القاعدة العليا لمربع em.
hanging خط النص هو القاعدة المعلقة.
middle خط النص هو منتصف مربع em.
ideographic خط النص هو القاعدة المفهمة.
bottom خط النص هو القاعدة السفلية لمربع em.

تفاصيل التقنية

القيمة الافتراضية: alphabetic

دعم المتصفحات

الرقم في الجدول يوضح إصدار المتصفح الذي يدعم هذه الخاصية بشكل كامل.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

التعليقات:يستخدم متصفح Internet Explorer 8 وأحدث إصداراته عنصر <canvas>.

دليل مرجعي لـ HTML5 Canvas