مثال
إنشاء خط أحمر في موقف 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 | 4.0 | تسعة | 3.6 | 4.0 | 10.1 |
تعريف والاستخدام
مجموعات الملكية textAlign أو العائد محاذاة الحالية لمضمون النص، وفقا لنقطة الربط.
عادة، فإن النص START في الموضع المحدد، ومع ذلك، إذا قمت بتعيين textAlign = "الحق" ووضع النص في موقف 150، فإن ذلك يعني أن النص يجب أن تنتهي في موقف 150.
Tip: استخدم fillText() أو strokeText() طريقة لرسم الواقع ووضع النص على قماش.
القيمة الافتراضية: | بداية |
---|---|
جافا سكريبت بناء الجملة: | context .textAlign="center|end|left|right|start"; |
قيم الممتلكات
القيم | وصف | العبها |
---|---|---|
بداية | افتراضي. يبدأ النص في الموضع المحدد | العبها " |
النهاية | ينتهي النص في الموضع المحدد | العبها " |
مركز | يتم وضع مركز النص في الموضع المحدد | العبها " |
اليسار | يبدأ النص في الموضع المحدد | العبها " |
حق | ينتهي النص في الموضع المحدد | العبها " |
<كائن قماش