Canvas addColorStop() کا متد
تعریف و استفاده
addColorStop() روشها مقدار رنگ و موقعیت gradient object را مشخص میکنند.
روش addColorStop() با createLinearGradient() یا createRadialGradient() همراه با استفاده
تعلیمات:میتوانید روش addColorStop() را چندین بار فراخوانی کنید تا تدریج را تغییر دهید. اگر روش gradient object را فراخوانی نکنید، تدریج قابل مشاهده نخواهد بود. برای مشاهده تدریج، باید حداقل یک علامت رنگی ایجاد کنید.
مثال
مثال 1
یک تدریج از سیاه به سفید را به عنوان رنگپوشی مستطیل تعریف کنید:
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
توجه:مثالهای بیشتری در پایین صفحه ارائه شده است.
نحوه استفاده
gradient.addColorStop(وقفه,رنگ);
مقدار پارامتر
| پارامتر | وصف |
|---|---|
| وقفه | ارزشهایی بین 0.0 و 1.0، که موقعیت شروع و پایان تدریج را در آن نشان میدهند. |
| رنگ | مقدار رنگ CSS در انتهای موقعیت نمایش داده میشود. |
مثالهای بیشتر
مثال 2
با استفاده از چندین روش addColorStop() برای تعریف تدریج:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
پشتیبانی مرورگر
مقابل میزانی شماراگر، نسخه مرورگر اولین که این ویژگی را کامل پشتیبانی میکند، مشخص شده است.
| کروم | ایج | فائرفاکس | سافری | آپرا |
|---|---|---|---|---|
| کروم | ایج | فائرفاکس | سافری | آپرا |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
تعلیمات:اینٹرنیشنل ایکسپلورر 8 اور اس سے پچھلے کی نسلیں <کینواس> عناصر کو نہیں سپورٹ کرتی ہیںً
