Gradients ng HTML Canvas

Canvas - Gradients

Ang gradient ay maaaring gamitin para mapunan ang parihaba, lupon, linya, teksto at iba pa. Ang hugis sa canvas ay hindi limitado sa lisang kulay lamang.

Mayroong dalawang uri ng gradient:

• createLinearGradient(x,y,x1,y1) - Lumikha ng linear gradient
• createRadialGradient(x,y,r,x1,y1,r1) - Lumikha ng radial/circular gradient

Una nang mayroon tayo ng gradient object, dapat ilagay ng dalawa o higit pang color stops.

Ang addColorStop() method ay nagtutukoy sa puntos ng pagpapatigil ng kulay at ang posisyon nito sa gradient. Ang posisyon ng gradient ay maaaring maging anumang posisyon sa pagitan ng 0 hanggang 1.

Para gamitin ang gradient, ilagay ang fillStyle o strokeStyle attribute bilang gradient at pagkatapos ay lumikha ng hugis (parihaba, teksto o linya).

Gamitin ang createLinearGradient()

Sample

Lumikha ng linear gradient. Gamitin ang gradient na magpupunan ng parihaba:

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

Subukan Ngayon

Gamitin ang createRadialGradient():

Sample

Lumikha ng radial/circular gradient. Gamitin ang gradient na magpupunan ng parihaba:

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

Subukan Ngayon

Ginawa ng:

Kompleto na Manwal ng Reference ng Canvas ng CodeW3C.com