ویژگی 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 | موضوع نمونه برای پر کردن نقاشی. |
جزئیات فنی
| مقدار پیشفرض: | #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
تصاویر مورد استفاده:
استفاده از تصویر برای پر کردن نقاشی:
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();
پشتیبانی مرورگر
موجودات میز کاری نشان میدهد که نسخه اولیه کاملاً پشتیبانی میکند.
| کروم | ایج | فائرفاکس | سافری | اوپرا |
|---|---|---|---|---|
| کروم | ایج | فائرفاکس | سافری | اوپرا |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
توجہاینٹرنیشنل ایکسپلورر 8 اور اس سے پچھلے کی نسلیں <کینووس> علامت کو نہیں مدد فراہم کرتی ہیں。
