HTML canvas attribute textBaseline
تعریف و استفاده
attribute textBaseline تنظیم یا بازگشت value baseline فعلی در زمان رندر کردن متن است.
تصویر زیر نمونه‌ای از baselineهای پشتیبانی شده توسط attribute textBaseline است:
نکته:fillText() یا strokeText() وقتی متد در حال قرار دادن متن روی کانواس است، از value textBaseline مشخص شده استفاده خواهد شد.
مثال
مستطیل‌های پر شده با رنگ آبی تعریف کنید:
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 با values مختلف 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 |
|---|
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگری است که این ویژگی را کاملاً پشتیبانی می‌کند.
| کروم | اینجر | افرادا | سفاری | اپرا |
|---|---|---|---|---|
| کروم | اینجر | افرادا | سفاری | اپرا |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
نکته:نسخه‌های 8 اینترنت اکسپلورر و قدیمی‌تر از عنصر <canvas> را پشتیبانی نمی‌کنند.
