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

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

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

strokeStyle ویژگی 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>.

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