HTML canvas textBaseline Property
مثال
ارسم خطًا أحمر عند y = 100 ، ثم ضع كل كلمة عند y = 100 بنص مختلف بقيم خط الأساس:
جافا سكريبت:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//Draw a red line at y = 100
ctx.strokeStyle = "red";
ctx.moveTo(5, 100);
ctx.lineTo(395, 100);
ctx.stroke();
ctx.font = "20px Arial"
//Place each word at y = 100 with different textBaseline values
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);
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
| Property | |||||
|---|---|---|---|---|---|
| textBaseline | Yes | 9.0 | Yes | Yes | Yes |
ملاحظة: تعمل الخاصية textBaseline بشكل مختلف في المتصفحات المختلفة ، خاصة عند استخدام "معلق" أو "إيديوغرامي".
التعريف والاستخدام
تقوم الخاصية textBaseline بتعيين أو إرجاع الخط الأساسي للنص الحالي المستخدم عند رسم النص.
يوضح الرسم التوضيحي أدناه مختلف خطوط الأساس التي تدعمها سمة textBaseline:
ملاحظة: ستستخدم أساليب fillText () و strokeText () قيمة textBaseline المحددة عند وضع النص على اللوحة القماشية.
| القيمة الافتراضية: | أبجدي |
|---|---|
| بناء جملة JavaScript: | السياق .textBaseline = "أبجدي | أعلى | معلق | وسط | إيديوغرامي | أسفل" ؛ |
قيم الملكية
| Values | Description | Play it |
|---|---|---|
| alphabetic | Default. The text baseline is the normal alphabetic baseline | |
| top | The text baseline is the top of the em square | |
| hanging | The text baseline is the hanging baseline | |
| middle | The text baseline is the middle of the em square | |
| ideographic | The text baseline is the ideographic baseline | |
| bottom | The text baseline is the bottom of the bounding box |
❮ مرجع قماش HTML