روش HTML canvas createLinearGradient()
تعریف و استفاده
createLinearGradient() این روش یک شیء متمرکز خطی ایجاد می‌کند.
متمرکز می‌توان برای پر کردن مستطیل‌ها، دایره‌ها، خطوط، متن و غیره استفاده شد.
توجه داشته باشید که مقادیراز این شیء به عنوان strokeStyle یا fillStyle خصوصیت.
توجه داشته باشید که مقادیرلطفاً از addColorStop() این روش رنگ‌های مختلف را تعیین می‌کند و همچنین رنگ‌ها را در جایی از شیء gradient قرار می‌دهد.
مثال
لطفاً به: بپردازید
یک متمرکز از سیاه به سفید (از چپ به راست) به عنوان رنگ‌پوشی مستطیل تعریف کنید:
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);
جملات
context.createLinearGradient(x0,y0,x1,y1);
مقدار پارامترها
| پارامترها | توضیح |
|---|---|
| x0 | مختصات x شروع متمرکز |
| y0 | مختصات y شروع متمرکز |
| x1 | مختصات x انتهای متمرکز |
| y1 | مختصات y انتهای متمرکز |
مثال‌های بیشتر
مثال 2
یک متمرکز (از بالا به پایین) به عنوان رنگ‌پوشی مستطیل تعریف کنید:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
مثال 3
یک متمرکز از سیاه به قرمز و سپس سفید تعریف کنید، به عنوان رنگ‌پوشی مستطیل:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگری است که این ویژگی را به طور کامل پشتیبانی می‌کند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
توجه:مرورگر Internet Explorer 8 و نسخه‌های قبلی از عنصر <canvas> را پشتیبانی نمی‌کنند.
