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

منابع Canvas

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

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

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

منابع Canvas