Gradient HTML Canvas

Canvas - Gradients

ມູນປະສົມສາມາດນຳໃຊ້ສຳລັບການລວມມູນປະສົມ, ວົງວຽນ, ມີວົງຊາຍ, ຂີ້ເຄື່ອງ, ຂີ້ວົງຊາຍ ແລະ ບາງຕົວຊີອື່ນໆ. ບາງປະກອບຂອງບັນດາຕົວຊີຂອງແບບກາງບໍ່ຈະມີມູນສີທີ່ດຽວ.

ມີສອງຊະນິດມູນປະສົມທີ່ແຕກຕ່າງກັນ:

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

Try it yourself

ການສ້າງ 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);

Try it yourself

See also:

Complete Canvas Reference Manual of CodeW3C.com