ویژگی fillStyle کانواس HTML

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

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

fillStyle ویژگی fillStyle تنظیم یا بازگشت رنگ، تغییر رنگ یا مدل پر کردن طراحی را انجام می‌دهد.

مثال

مثال 1

تعریف مستطیلی که با رنگ آبی پر شده است:

موزع وب شما پشتیبانی از تگ کانواس را ندارد.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

آزمایش کنید

نکته:مثال‌های بیشتری در پایین صفحه ارائه شده است.

منطق

context.fillStyle=color|gradient|pattern;

مقدار ویژگی

مقدار توضیح
color رنگ پر کردن طراحی را نشان می‌دهد مقدار رنگ CSS. مقدار پیش‌فرض #000000 است.
gradient موضوع تغییر رنگ برای پر کردن طراحی استفاده می‌شود (خطییاشعاعی)
pattern موضوع pattern برای پر کردن طراحی استفاده می‌شود

جزئیات فنی

مقدار پیش‌فرض: #000000

مثال‌های بیشتری

مثال 2

تعریف یک تغییر رنگ از بالا به پایین، به عنوان رنگ پس‌زمینه مستطیل:

موزع وب شما پشتیبانی از تگ کانواس را ندارد.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

آزمایش کنید

مثال 3

تعریف یک تغییر رنگ از چپ به راست، به عنوان رنگ پس‌زمینه مستطیل:

موزع وب شما پشتیبانی از تگ کانواس را ندارد.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

آزمایش کنید

مثال 4

تعریف یک تغییر رنگ از سیاه به قرمز به سفید، به عنوان رنگ پس‌زمینه مستطیل:

موزع وب شما پشتیبانی از تگ کانواس را ندارد.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

آزمایش کنید

مثال 5

تصاویر مورد استفاده:

لامپ

از تصاویر برای پر کردن طراحی استفاده کنید:

موزع وب شما پشتیبانی از تگ کانواس HTML5 را ندارد.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

آزمایش کنید

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگری است که این ویژگی را کاملاً پشتیبانی می‌کند.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

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