Canvas globalCompositeOperation ການຕັ້ງຂໍ້ມູນ
ການກໍານົດແລະການນໍາໃຊ້
globalCompositeOperation ການຕັ້ງຂໍ້ມູນຫຼືການກັບຄືນຂອງການຕັ້ງຂໍ້ມູນຫຼືການຕັ້ງຂໍ້ມູນສະຫຼາດຫຼືພາບສະຫຼາດຂອງພາບຕົວເລື່ອງຫຼືພາບຈູດຍາດ.
ພາບຕົວເລື່ອງ = ພາບທີ່ທ່ານຈະປະຕິບັດຕິດຕັ້ງໃສ່ແຜ່ນພາບ.
ພາບຈູດຍາດ = ພາບທີ່ທ່ານໄດ້ປະຕິບັດຕິດຕັ້ງໃສ່ແຜ່ນພາບ.
ຄວາມຈະນັດ
ຕົວຢ່າງ 1
ການຂຽນບວກຢ່າງຕ່າງກັນດ້ວຍຄວາມຄືນມູນຄໍາການຄວາມຄືນ globalCompositeOperation. ບວກກາດີສີແດງແມ່ນພາບຈູດຍາດ. ບວກກາດີສີຟ້າແມ່ນພາບຕົວເລື່ອງ:
source-over destination-over
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);
ຕົວຢ່າງ 2
ທັງໝົດຄວາມຜົນຂອງ globalCompositeOperation:
ການນຳໃຊ້
context.globalCompositeOperation="source-in";
ຄວາມຜົນຂອງປະສົມ
| ຄວາມຜົນ | ອະທິບາຍ |
|---|---|
| source-over | ຄົນປະຈຳ. ສະແດງພາບອອກແບບຢູ່ເທິງພາບເປົ້າ. |
| source-atop | ສະແດງພາບອອກແບບຢູ່ເທິງຫົວພາບເປົ້າ. ພາບອອກແບບທີ່ຢູ່ນອກຫົວພາບເປົ້າຈະບໍ່ຖືກສະແດງ. |
| source-in | ສະແດງພາບອອກແບບຢູ່ໃນພາບເປົ້າ. ພາບອອກແບບຢູ່ໃນພາບເປົ້າຈະຖືກສະແດງພຽງສ່ວນພາບອອກແບບ, ພາບເປົ້າຈະຖືກເປັນສານ. |
| source-out | ສະແດງພາບອອກແບບຢູ່ທາງນອກພາບເປົ້າ. ພາບອອກແບບຢູ່ທາງນອກພາບເປົ້າຈະຖືກສະແດງພຽງສ່ວນພາບອອກແບບ, ພາບເປົ້າຈະຖືກເປັນສານ. |
| destination-over | ສະແດງພາບເປົ້າຢູ່ເທິງຫົວພາບອອກແບບ. |
| destination-atop | ສະແດງພາບເປົ້າຢູ່ເທິງຫົວພາບອອກແບບ. ພາບເປົ້າຢູ່ນອກຫົວພາບອອກແບບຈະບໍ່ຖືກສະແດງ. |
| destination-in | ສະແດງພາບເປົ້າຢູ່ໃນພາບອອກແບບ. ພາບເປົ້າຢູ່ໃນພາບອອກແບບຈະຖືກສະແດງພຽງສ່ວນພາບເປົ້າ, ພາບອອກແບບຈະຖືກເປັນສານ. |
| destination-out | ສະແດງພາບເປົ້າຢູ່ທາງນອກພາບອອກແບບ. ພາບເປົ້າຢູ່ທາງນອກພາບອອກແບບຈະຖືກສະແດງພຽງສ່ວນພາບເປົ້າ, ພາບອອກແບບຈະຖືກເປັນສານ. |
| lighter | ສະແດງພາບອອກແບບ + ພາບເປົ້າ. |
| ສໍາເນົາ | ສະແດງພາບອອກແບບ. ບໍ່ຄວນລະບຸພາບເປົ້າ. |
| xor | 使用异或操作对源图像与目标图像进行组合。 |
技术细节
| 默认值： | source-over |
|---|
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| ເຊີຟາຣີ | ເອດຈູກ | ຟຣິຈີສ | ຊາຟາຣີ | ໂອເປຣາ |
|---|---|---|---|---|
| ເຊີຟາຣີ | ເອດຈູກ | ຟຣິຈີສ | ຊາຟາຣີ | ໂອເປຣາ |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ຄໍາເຫັນ:ບັນດາບາຣ໌ເຊີ້ເອັນເຈີ້ຣເພີ່ມຫຼາຍກວ່າ 8 ບໍ່ສາມາດສະໜັບສະໜູນ <canvas> ບັນດາບາຣ໌ເຊີ້ຫຼາຍກວ່າ 8.
