خاصية strokeStyle لمسطح HTML

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

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

strokeStyle تستخدم لضبط أو إرجاع اللون أو التدرج أو النمط للفرشاة.

مثال

مثال 1

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

هذا المتصفح لا يدعم علامة القناة.

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

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

هذا المتصفح لا يدعم علامة القناة.

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":

هذا المتصفح لا يدعم علامة القناة.

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> العنصر.

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