ایچ تی ایم ال کانواس گریدینٹ

کانواس - گرادیئن

گرادیئن مستطیل، دائرہ، لائن، متن وغیرہ پر بجلی دینا استعمال کی جاسکتی ہیں. کینوس پر شکل صرف ایک رنگ سے محدود نہیں ہوتا.

دو طرح کی گرادیئن ہیں:

• createLinearGradient(x,y,x1,y1) - گرادیئن بنانا
• createRadialGradient(x,y,r,x1,y1,r1) -径向/دائری گرادیئن بنانا

جب ہم گرادیئن آئیٹم کا حصول کیا، تو دو یا زیادہ رنگ میٹکسیز اضافے کئے جانا چاہئیں.

addColorStop() طریق، رنگ کا رستہ اور گرادیئن میں رستہ کا مقام مقرر کرتی ہے. گرادیئن کا مقام 0 سے 1 کے درمیان کا کسی مقام کا ہونا چاہئیے.

گرادیئن استعمال کی توسیع، fillStyle یا strokeStyle پر گرادیئن کو سے ساتھ دیکھیئے، شکل ( مستطیل، متن یا لائن) بجلی دینا.

createLinearGradient() استعمال

مثال

گرادیئن بنانا، گرادیئن سے مستطیل بجلی دینا:

جاوا اسکریپت:

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() استعمال:

مثال

径向/دائری گرادیئن بنانا، گرادیئن سے مستطیل بجلی دینا:

جاوا اسکریپت:

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);

خود شخصی طور پر کوشاں!

دوسروں کا ملاحظہ:

کدوو3 سی کوم کا پورا کانواس مراجعه کتاب دستور