Canvas fillText() الأسلوب
تعريف الاستخدام
fillText()
يستخدم هذا الأسلوب لرسم النص المملون على اللوحة. لون النص الافتراضي هو الأسود.
إشارةاستخدم font لتحديد الخط والأحجام باستخدام fillStyle تطبيق الألوان أو التدرجات المختلفة لرسم النص.
مثال
استخدام fillText()، لكتابة نص "Hello world!" و "codew3c.com" على اللوحة:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="20px Georgia"; ctx.fillText("Hello World!",10,50); ctx.font="30px Verdana"; // إنشاء تدرج var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // استخدام التدرج للملون ctx.fillStyle=gradient; ctx.fillText("codew3c.com",10,90);
النحو
context.fillText(text,x,y,maxWidth);
م 参数 القيمة
م 参数 | وصف |
---|---|
text | تحديد النص المطلوب عرضه على اللوحة. |
x | موقع x للبدء في رسم النص (علاوةً على اللوحة). |
y | موقع y للبدء في رسم النص (علاوةً على اللوحة). |
maxWidth | اختياري. أقصى عرض النص، مقاسه بالبكسل. |
دعم المتصفحات
الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم هذا الخصائص لأول مرة.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ملاحظة:Internet Explorer 8 وأحدث إصداراته لا يدعم عنصر <canvas>.