روش HTML canvas fillText()

دستورالعمل‌های کانواس HTML5

تعریف و استفاده

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

نکته:نسخه‌های 8 و قبل از آن از عناصر <canvas> پشتیبانی نمی‌کنند.

دستورالعمل‌های کانواس HTML5