ویژگی strokeStyle کانواس HTML

دستورالعمل‌های کانواس HTML5

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

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|pattern;

مقدار ویژگی

مقدار توضیح
color رنگ قلم نقاشی را نشان می‌دهد مقدار رنگ CSS.) مقدار پیش‌فرض #000000 است.
gradient شیء تدریجی برای پر کردن نقاشی‌ها (خطییاشعاعی)
pattern شیء pattern برای ایجاد قلم تدریجی

جزئیات فنی

مقدار پیش‌فرض: #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

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

دستورالعمل‌های کانواس HTML5