Canvas createLinearGradient() روش

منابع Canvas

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

createLinearGradient() این روش شیء میدان تغییر خطی را ایجاد می‌کند.

میدان تغییر می‌تواند برای پر کردن مستطیل‌ها، دایره‌ها، خطوط، متن و غیره استفاده شود.

توضیحات:از این شیء به عنوان strokeStyle یا fillStyle مقدار ویژگی.

توضیحات:لطفاً از addColorStop() این روش رنگ‌های مختلف را تعیین می‌کند و همچنین مکان‌های رنگ‌ها در شیء gradient را مشخص می‌کند.

مثال

لطفاً ببینید:

یک میدان تغییر از سیاه به سفید (از چپ به راست) به عنوان رنگ‌پوشی مستطیل تعریف کنید:

مرورگر شما برچسب HTML5 canvas را پشتیبانی نمی‌کند.

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

یک میدان تغییر (از بالا به پایین) به عنوان رنگ‌پوشی مستطیل تعریف کنید:

مرورگر شما برچسب canvas را پشتیبانی نمی‌کند.

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

یک میدان تغییر از سیاه به قرمز و سپس به سفید تعریف کنید، به عنوان رنگ‌پوشی مستطیل:

مرورگر شما برچسب canvas را پشتیبانی نمی‌کند.

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

نکته:نسخه‌های 8 و قدیمی‌تر از Internet Explorer از عنصر <canvas> پشتیبانی نمی‌کنند.

منابع Canvas