Canvas textBaseline属性

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

定义和用法

属性textBaseline设置或返回在绘制文本时的当前文本基线。

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

مخطط الأساس النصي

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

مثال

تعريف مستطيل ملون باللون الأزرق:

لا يدعم متصفحك علامة 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 افتراضي. خط النص هو الخط العادي للحروف.
العلوي خط النص هو القاعدة العليا للصندوق em.
الساقط خط النص هو الخط الساقط.
الوسط خط النص هو الوسط الصندوق em.
ideographic خط النص هو الخط المعنوي.
السفلى خط النص هو القاعدة السفلية للصندوق 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>.

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