خصائص fillStyle لـ HTML canvas

دليل مرجعي HTML5 Canvas

التعريف والاستخدام

fillStyle تحدد أو تعود إلى اللون أو التدرج أو النمط المستخدم لتعبئة الرسم.

مثال

مثال 1

تحديد شريط معبأ بلون أزرق:

لا يدعم متصفحك علامة التبويب canvas.

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

تحديد التدرج من الأعلى إلى الأسفل كنمط تلون الشريط:

لا يدعم متصفحك علامة التبويب canvas.

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

تحديد التدرج من اليسار إلى اليمين كنمط تلون الشريط:

لا يدعم متصفحك علامة التبويب canvas.

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

تحديد التدرج من الأسود إلى الأحمر إلى الأبيض كنمط تلون الشريط:

لا يدعم متصفحك علامة التبويب canvas.

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 canvas.

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>.

دليل مرجعي HTML5 Canvas