Canvas strokeStyle الخاصية

دليل مرجعي لـ Canvas

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

strokeStyle يُحدد أو يُرجع اللون أو التدرج أو النمط المُستخدم في خط الرسم.

مثال

مثال 1

رسم مستطيل. استخدم لون خط الرسم الأزرق:

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

JavaScript:

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

جرب بنفسك

النحو

context.strokeStyle=color|gradient|نمط;

قيمة الخاصية

القيمة وصف
color تُشير إلى لون خط الرسم. قيمة اللون CSS). القيمة الافتراضية هي #000000.
gradient مثلية用于ملء الرسومات (خطيأومركزي)
نمط مثلية用于إنشاء خطوط نمط الظلال.

تفاصيل التقنية

القيمة الافتراضية: #000000

مزيد من الأمثلة

المثال 2

رسم مستطيل. استخدم خط رش التدرج:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// استخدم التدرج للملء
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

جرب بنفسك

المثال 3

اكتب النص "codew3c.com" باستخدام خط رش التدرج:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// أنشئ تدرج
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// استخدم التدرج للملء
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

جرب بنفسك

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.

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