HTML canvas transform() 方法
ການອະທິບາຍ ແລະ ການນໍາໃຊ້
ແຕ່ລະວັດຖຸຂອງການແກ້ໄຂກະດູກມີມາດຕະການປ່ຽນແປງທີ່ປັດຈຸບັນ.
transform() ວິທີການທີ່ປ່ຽນມາດຕະການປ່ຽນແປງຂອງມັນ. ມັນຈະປະຕິບັດມາດຕະການປ່ຽນແປງທີ່ລາວຖືກອະທິບາຍຢູ່ລາວ:
a c e b d f 0 0 1
ຖ້າອອກສຽງ, transform() ຈະອະນຸຍາດທ່ານໃຫ້ຂະຫຍາຍ, ເຄື່ອນ, ແລະ ປ່ຽນສະໝອງຂອງການປ່ຽນແປງຂອງທັງໝົດ.
ຄໍາເຫັນ:ການປ່ຽນແປງນີ້ຈະມີຜົນຕໍ່ກັບການຂັບເຄື່ອນທີ່ເປັນຫຼັງຂອງການເອີ້ນ transform().
ຄໍາເຫັນ:ວິທີການ transform() ຈະປະຕິບັດຕໍ່ກັບ rotate()、scale()、translate() ຫຼື ການປ່ຽນແປງອື່ນໆທີ່ເຮັດໂດຍ transform(). ເຕັມຈຳນວນ: ຖ້າທ່ານໄດ້ກຳນົດການຄົ້ນພົບຂອງການຂັບເຄື່ອນສອງໆ, ວິທີການ transform() ຈະຂະຫຍາຍການຂັບເຄື່ອນສອງໆ, ແລະການຂັບເຄື່ອນທີ່ທ່ານມີຈະກາຍເປັນສີ່ໆ.
ຄຳແນະນຳ:ບັນທຶກ: setTransform() ວິທີການ, ທີ່ຈະບໍ່ມີພາລະກິດກັບການປ່ຽນແປງອື່ນ.
ຄວາມຈຳນວນ
ກຳລັງອອກພາບບອກຢ່າງ; ຜ່ານ transform() ສ້າງການປ່ຽນແປງມາດຕະການໃໝ່, ກຳລັງອອກພາບບອກຢ່າງອີກຄັ້ງ; ສ້າງການປ່ຽນແປງມາດຕະການໃໝ່, ແລະ ກຳລັງອອກພາບບອກຢ່າງອີກຄັ້ງ. ສະແດງວ່າ, ແຕ່ລະຄັ້ງທີ່ທ່ານເອີ້ນ transform(), ມັນຈະສ້າງມາດຕະການປ່ຽນແປງຂອງມາດຕະການປ່ຽນແປງທີ່ໄດ້ມາກ່ອນ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
ຂອດອກການ
context.transform(a,b,c,d,e,f);
ຄວາມລວມຂອງການຈຳນວນ
| ການຈຳນວນ | ການອະທິບາຍ |
|---|---|
| a | ການຂົນສົ່ງພາບຕັ້ງຢ່າງສັບສົນ |
| b | ການຂົນສົ່ງພາບຕັ້ງຢ່າງສັບສົນ |
| c | ການຂົນສົ່ງພາບຕັ້ງຢ່າງສັບສົນ |
| d | ການຂົນສົ່ງພາບຕັ້ງຢ່າງສັບສົນ |
| e | ການຂົນສົ່ງພາບຕັ້ງຢ່າງສັບສົນ |
| f | ການຂົນສົ່ງພາບຕັ້ງຢ່າງສັບສົນ |
ການສະໜັບສະໜູນບັນດາບັນດາຊົນທະນະທຳ
ຈຳນວນໃນຕາລາງທີ່ໄດ້ກ່າວອອກຄັ້ງທໍາອິດຂອງການສະໜັບສະໜູນຄວາມຂັ້ນສະຖານຂອງບັນດາບັນດາຊົນທະນະທຳ.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ຄໍາເຫັນ:Internet Explorer 8 ແລະຫຼັງຈາກນັ້ນບໍ່ສາມາດສະໜັບສະໜູນ <canvas> ອອກອາກາດ.
