مетод 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);
پشتیبانی مرورگر
اعداد در این جدول نشان‌دهنده نسخه اولیه مرورگرهای کاملاً پشتیبانی‌کننده از این ویژگی هستند.
| کروم | Edge | فایرفاکس | سفاری | آپرا |
|---|---|---|---|---|
| کروم | Edge | فایرفاکس | سفاری | آپرا |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
توجه:اینترنت اکسپلورر 8 و نسخه‌های قدیمی‌تر از عناصر <canvas> پشتیبانی نمی‌کنند.
