ການເພີ່ມສັນຍາກະສັບສີ
ການຈັດການ ແລະ ການນໍາໃຊ້
addColorStop() ກົດລະບຽບກວມເອົາສີ ແລະ ຈຸດທີ່ສູງສຸດຂອງ gradient.
addColorStop() ພາສາກັບ createLinearGradient() ຫຼື createRadialGradient() ການປະກອບກັນ
注释：ທ່ານສາມາດເອິ້ນພາສາ addColorStop() ຈຳນວນຫຼາຍເພື່ອປ່ຽນສັນຍານ. ຖ້າທ່ານບໍ່ໃຊ້ພາສານັ້ນຕໍ່ບັນຊີ gradient, ສັນຍານຈະບໍ່ໄດ້ເຫັນ. ເພື່ອທີ່ຈະໄດ້ເຫັນສັນຍານ, ທ່ານຕ້ອງສ້າງບັນຊີສີນແລະສີດີຈຳນວນຢ່າງໜ້ອຍຫຼາຍຫຼັກ.
ບັນທາງ
ບັນທາງ 1
ການຈັດການສັນຍານຈາກສີນແລະສີດີເປັນສິ່ງກະຈາຍໃນຕາກັບບັນຊີການກະຈາຍ.
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
ຄຳແນະນຳ:ບັນທາງອີກຫຼາຍທີ່ມີຢູ່ບ່ອນດ້ານຕາເວັນຕົກຂອງເວັບໄຊ.
ກົດລະບຽບ
gradient.addColorStop(stop,color);
ຄູ່ມູນຄັນ
| ປະເພດ | ການອະທິບາຍ |
|---|---|
| stop | ຈຳນວນທີ່ຢູ່ລະຫວ່າງ 0.0 ແລະ 1.0 ເວົ້າເຖິງຈຸດທີ່ການສັນຍານລະຫວ່າງຈຸດເລີ່ມ ແລະ ຈຸດສິ້ນ. |
| color | ຈຳນວນທີ່ສະແດງຢູ່ຈຸດສິ້ນຂອງ CSS. |
ຫຼາຍບັນທາງອີກ
ບັນທາງ 2
ການຈັດການສັນຍານຈາກການໃຊ້ພາສາ addColorStop() ຈຳນວນຫຼາຍ.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
ການສະໜັບສະໜູນບັນຊີທາງຄອມພິວເຕີ້
ຈຳນວນທີ່ໃນຕາມກຳນົດຄວາມຂອງສັບພາສາທີ່ສາມາດສະໜັບສະໜູນປະກາດດັ່ງກ່າວຢ່າງເຕັມຄວາມສຳຄັນ.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注释：Internet Explorer 8 以及更早的版本不支持
