تدرج‌های کانواس HTML

کanvas - رنگ‌های تدریجی

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

دو نوع مختلف از رنگ‌های تدریجی وجود دارد:

• createLinearGradient(x,y,x1,y1) - ایجاد رنگ‌های تدریجی خطی
• createRadialGradient(x,y,r,x1,y1,r1) - ایجاد رنگ‌های تدریجی محدب/دایره‌ای

وقتی که ما شیء تدریجی داریم، باید دو یا بیشتر نقاط رنگی اضافه کنیم.

مетод addColorStop() نقطه توقف رنگ و موقعیت آن در طول تدریج را مشخص می‌کند. موقعیت تدریج می‌تواند در بازه 0 تا 1 باشد.

برای استفاده از رنگ‌های تدریجی، باید ویژگی fillStyle یا strokeStyle را به رنگ تدریجی تنظیم کنید و سپس شکل‌ها (مستطیل، متن یا خط) را ترسیم کنید.

با استفاده از createLinearGradient()

مثال

ایجاد رنگ‌های تدریجی خطی. با استفاده از رنگ‌های تدریجی مستطیل پر کردن:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// ایجاد رنگ‌های تدریجی
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// با استفاده از رنگ‌های تدریجی پر کردن
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

آزمایش کنید

با استفاده از createRadialGradient():

مثال

ایجاد رنگ‌های تدریجی محدب/دایره‌ای. با استفاده از رنگ‌های تدریجی مستطیل پر کردن:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// ایجاد رنگ‌های تدریجی
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// با استفاده از رنگ‌های تدریجی پر کردن
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

آزمایش کنید

لطفاً به: مراجعه کنید

دستورالعمل‌های کامل کانواس CodeW3C.com