طريقة HTML canvas fillText()

دليل مرجعي HTML5 Canvas

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

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

دليل مرجعي HTML5 Canvas