Canvas fillStyle خاصية

دليل 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

الصور المستخدمة:

lamp

استخدام الصور لملء الرسم:

متصفحك لا يدعم علامة 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>.

دليل Canvas