HTML ক্যানভাস গ্রেডিয়েন্ট

ক্যানভাস - শৃঙ্গীতময় ফুল

শৃঙ্গীতময় ফুল চতুর্ভুজ, বৃত্ত, লাইন, লেখা ইত্যাদি পূর্ণ করা যায়। ক্যানভাসের আকৃতি সবসময়ই শুধুমাত্র একটি রঙের নয়。

দুইটি ভিন্ন ধরনের শৃঙ্গীতময় ফুল রয়েছে:

• 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-এর সমস্ত Canvas রেফারেন্স ম্যানুয়েল