Canvas fillStyle Property
ການກໍານົດແລະການນໍາໃຊ້
fillStyle ການກະຕຸ້ມຫຼືກັບຄືນສຳລັບສີນີ້ມີບັນຫາສີນີ້ຫຼືຮູບຟ້າຕັດ.
ບ່ອນທີ່
ບ່ອນທີ່ 1
ກຳນົດການກະຈາຍບອກທີ່ໃຊ້ສີຂຽວ.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
ຄຳແນະນຳ:ຫຼາຍຕົວຢ່າງອີກຢູ່ບ່ອນບັນທຶກຕໍ່າ.
ກົດລະບຽບ
context.fillStyle=color|gradient|pattern;
ຄູ່ມູນຄ່າສົດທີ່ນຳໃຊ້.
| ຄູ່ມູນຄ່າສົດ | ການອະທິບາຍ |
|---|---|
| color | ສະແດງຄວາມຄິດຂອງສີກະຈາຍບອກ. ຄູ່ມູນສີ CSS。ຄູ່ມູນຄ່າສົດຄື: #000000。 |
| gradient | ໂອລາການ gradient ທີ່ນຳໃຊ້ສຳລັບກະຈາຍບອກ（ລະບາຍຫຼືລັດນິວຊີວິດ）。 |
| pattern | ໂອລາການຂອງ pattern ທີ່ນຳໃຊ້ສຳລັບກະຈາຍບອກ. |
ຂໍ້ມູນດ້ານເຕັກນິກ.
| ຄູ່ມູນຄ່າສົດຄື: | #000000 |
|---|
ຫຼາຍຕົວຢ່າງອີກ
ຕົວຢ່າງ 2
ກຳນົດສີຫຼັງຈາກບາງສີຫຼັງຈາກສີເຫຼືອກາງລະບາຍການກະຈາຍບອກເພື່ອແທນຂອງບາງຮູບມັນ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
ຕົວຢ່າງ 3
ກຳນົດສີຫຼັງຈາກບາງສີຫຼັງຈາກສີເຫຼືອກາງລະບາຍການກະຈາຍບອກເພື່ອແທນຂອງບາງຮູບມັນ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
ຕົວຢ່າງ 4
ກຳນົດການສະໜັບສະໜູນສີຫຼັງຈາກບາງສີເຫຼືອກາງລະບາຍການກະຈາຍບອກເພື່ອແທນຂອງບາງຮູບມັນ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
ຕົວຢ່າງ 5
ພາບທີ່ໃຊ້ໄດ້:
ນຳໃຊ້ຕາຕະລຶງຂອງພາບເພື່ອລະບາຍການຂັດແຍງ.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
ການສະໜັບສະໜູນບິດເຊີແບບ.
ຕົວແທນຂອງຕາມຂໍ້ມູນບອກຄັດຕະວັດຂອງຊາວບິດເຊີໄດ້ສະໜັບສະໜູນແທນນັ້ນຢ່າງເຕັມສ່ວນ.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注意：Internet Explorer 8 以及更早的版本不支持
