خصائص textAlign على الرسام البياني

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

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

textAlign المعرف وفقًا للشريط، يُحدد أو يُرجع الطريقة الحالية للتسوية النصية للمحتوى النصي.

عادةً، النص يبدأ من الموقع المحدد، ولكن إذا قمت بضبط textAlign إلى "right" ووضع النص في الموقع 150، فإن النص ينتهي في الموقع 150.

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

مثال

أنشئ خط أحمر في الموقع 150. الموقع 150 هو نقطة الأنقاض لجميع النصوص المحددة أدناه. ادرس تأثير كل قيمة textAlign المختلفة:

متصفحك لا يدعم علامة canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// إنشاء خط أزرق في الموقع 150
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// عرض قيم textAlign المختلفة
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);

جرب بنفسك

النحو

السياق.textAlign="center|end|left|right|start";

قيمة الخاصية

القيمة الوصف
بداية افتراضي. النص يبدأ في الموقع المحدد.
النهاية النص ينتهي في الموقع المحدد.
الوسط مركز النص يتم وضعه في الموقع المحدد.
اليسار النص ممدود إلى اليسار.
اليمين النص ممدود إلى اليمين.

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

القيمة الافتراضية: بداية

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

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

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