ویژگی textAlign کانواس HTML

دستورالعمل‌های کانواس HTML5

تعریف و استفاده

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

آزمایش کنید

رابط‌نویسی

context.textAlign="center|end|left|right|start";

مقدار ویژگی

مقدار توضیح
شروع پیش‌فرض. متن در مکان مشخص شده آغاز می‌شود.
end متن در مکان مشخص شده پایان می‌یابد.
center متن در مرکز مکان مشخص شده قرار می‌گیرد.
left چینش چپ متن.
right چینش راست متن.

جزئیات فنی

مقدار پیش‌فرض: شروع

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهای پشتیبانی‌کننده از این ویژگی هستند.

Chrome Edge Firefox Safari opera
Chrome Edge Firefox Safari opera
4.0 9.0 3.6 4.0 10.1

نکته:نسخه‌های 8 اینترنت اکسپلورر و قدیمی‌تر از عناصر <canvas> پشتیبانی نمی‌کنند.

دستورالعمل‌های کانواس HTML5