ປະສົມປະສານ HTML canvas fillStyle 属性
ການປັບປຸງ ແລະ ການນໍາໃຊ້
fillStyle ການປັບປຸງຫຼືການກະຈາຍສີ, gradient ຫຼື pattern ທີ່ກະຈາຍບົດສິນ.
ຄັນຄວາມ
ຄັນຄວາມ 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 | ໂອບາງປະກອບການກະຈາຍບົດສິນ(ການສະແດງກະຈາຍສີວາຍຫຼືການສະແດງກະຈາຍສີວາຍ) |
| 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 ແລະກວ່າຂອງຈະບໍ່ສະໜັບສະໜູນ <canvas> ອັນມິວ
