ویژگی strokeStyle کانواس
تعریف و استفاده
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|pattern;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| color | رنگ خط موازی را نشان میدهد مقدار رنگ CSS). مقدار پیشفرض #000000 است. |
| gradient | شیء محوتی برای پر کردن طراحیها (خطییاتقارندار)) |
| pattern | شیء 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);
پشتیبانی مرورگر
موجودات جدول نشاندهنده نسخه اولیه از مرورگرهای کاملاً پشتیبانیکننده از این ویژگی هستند.
| کروم | ایج | فائرفاکس | سافری | آپریا |
|---|---|---|---|---|
| کروم | ایج | فائرفاکس | سافری | آپریا |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
تعلیمات:اینٹرنیٹ ایکسپلورر 8 اور اس سے پچھلے کی نسلیں <کینواس> علامت کو نہیں سپورٹ کرتی ہیں。
