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 فایرفاکس سافاری اپرا
Chrome Edge فایرفاکس سافاری اپرا
4.0 9.0 3.6 4.0 10.1

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

منوی 参考 کانواس