ویژگی textAlign کانواس
تعریف و استفاده
textAlign ویژگی‌ها بر اساس نقشه، تنظیم یا بازگشت روش هم‌آهنگی محتوای متن فعلی.
بطور معمول، متن از مکان مشخصی شروع می‌شود، اما اگر مقدار textAlign="right" را تنظیم کنید و متن را در موقعیت 150 قرار دهید، متن در موقعیت 150 پایان خواهد یافت.
توضیح:با استفاده از fillText() یا strokeText() روش‌ها واقعاً در کanvas نقاشی می‌کنند و متن را قرار می‌دهند.
مثال
یک خط قرمز در موقعیت 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";
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| شروع | پیش‌فرض. متن در مکان مشخصی شروع می‌شود. |
| پایان | متن در مکان مشخصی پایان می‌یابد. |
| مرکز | موقعیت مرکزی متن در مکان مشخصی قرار دارد. |
| چپ | تنظیم چپ به سمت راست متن. |
| راست | تنظیم چپ به راست متن. |
جزئیات فنی
| مقدار پیش‌فرض: | شروع |
|---|
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگری است که از این ویژگی پشتیبانی می‌کند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
توجه:نسخه‌های 8 و قبل از آن از Internet Explorer از عنصر <canvas> پشتیبانی نمی‌کنند.
