Tsafta jiyar da kudu Canvas HTML

Gaba - Gudan

Gudan za a iya amfani da su don fari fari (shaxula, girmama, kura, kalima) kuma yana kai tsaye ne na kai kai. Fari fari na kai tsaye a cikin gaba yana kai tsaye na kai kai.

Anfani gudan na uku:

• createLinearGradient(x,y,x1,y1) - Anfani gudan linear
• createRadialGradient(x,y,r,x1,y1,r1) - Anfani gudan radial/circular

Yan gudan bata a kaiwa hukun gudan daga biyu zuwa maraman.

addColorStop() hukun ba a sifati gudan da na yancin kada kai, kuma na yancin gudan. Gudan yana kai tsaye daga 0 zuwa 1.

Lamannan za a gudan, kiyi a kara fillStyle tatau strokeStyle, kuma fari fari kama fari fari (shaxula, kalima ko kura).

Aro a createLinearGradient()

Shirin

Anfani gudan linear. Yan gudan ga fari fari:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// anfani gudan
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// yan gudan
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Ganin shi kaiyaki

Aro a createRadialGradient():

Shirin

Anfani gudan radial/circular. Yan gudan ga fari fari:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// anfani gudan
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// yan gudan
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Ganin shi kaiyaki

Kwai gani:

Manu kafin kula na kwarinji kanji na kafin kula na CodeW3C.com