خصائص textAlign في HTML canvas

دليل مرجعي HTML5 Canvas

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

textAlign يحدد أو يعيد النص الحالي لتحديد طريقة تنسيق النص.

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

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

مثال

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

البرنامج التصفح الخاص بك لا يدعم علامة القناة.

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";

قيمة الخاصية

القيمة الوصف
start افتراضي. يبدأ النص في الموضع المحدد
end ينتهي النص في الموضع المحدد
center يوضع مركز النص في الموضع المحدد
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>.

دليل مرجعي HTML5 Canvas