مثال
إنشاء خط أحمر في موقف 150. الوظيفة 150 هو نقطة الربط لجميع النص المحدد في المثال التالي. دراسة تأثير كل قيمة العقار textAlign:
جافا سكريبت:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Show the different textAlign values
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 | نعم فعلا | تسعة | نعم فعلا | نعم فعلا | نعم فعلا |
تعريف واستخدام
مجموعات الملكية textAlign أو ترجع المواءمة الحالية لمضمون النص، وفقا لنقطة الربط.
عادة، فإن النصبدء في الموضع المحدد، ومع ذلك، إذا قمت بتعيين textAlign = "حق" ووضع النص في موقف 150، فإن ذلك يعني أن النص يجب أن تنتهي في موقف 150.
نصيحة: استخدم fillText() أو strokeText() طريقة رسم الواقع ووضع النص على قماش.
القيمة الافتراضية: | بداية |
---|---|
جافا سكريبت بناء الجملة: | context.textAlign="center|end|left|right|start"; |
قيم الملكية
القيم | وصف | العبها |
---|---|---|
start | افتراضي. يبدأ النص في الموضع المحدد | العبها " |
end | ينتهي النص في الموضع المحدد | العبها " |
center | يتم وضع مركز للنص في الموضع المحدد | العبها " |
left | يبدأ النص في الموضع المحدد | العبها " |
right | ينتهي النص في الموضع المحدد | العبها " |