Canvas fillText() الأسلوب

تعريف الاستخدام

fillText() يستخدم هذا الأسلوب لرسم النص المملون على اللوحة. لون النص الافتراضي هو الأسود.

إشارةاستخدم font لتحديد الخط والأحجام باستخدام fillStyle تطبيق الألوان أو التدرجات المختلفة لرسم النص.

مثال

استخدام fillText()، لكتابة نص "Hello world!" و "codew3c.com" على اللوحة:

متصفحك لا يدعم علامة HTML5 canvas.

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>.