ກົນລະບົບ HTML canvas setTransform()

ປືກສາຂອງ HTML5 Canvas

ການອະທິບາຍແລະການນໍາໃຊ້

ແຕ່ລະບັນດາບັນດາທີ່ຢູ່ຕະຫຼອດຈະມີກາງການປ່ຽນແປງຄືນທີ່ກຳລັງດຳເນີນ.

setTransform() ກົນລະບົບທີ່ລະບົບກາງການປ່ຽນແປງຄືນເປັນກາງການຄວາມຄິດທີ່ຫຼັງຈາກນັ້ນ, ແລະດຳເນີນການດຽວກັນດ້ວຍຄຳຂັດແຍ່ງດຽວກັນ. transform().

ຄືອີກວ່າ setTransform() ອະນຸຍາດໃຫ້ທ່ານຂະຫຍາຍ, ລ້າງ, ຍ້າຍແລະສ້າງກາງການຄ້າງກັບກາງການຄວາມຄິດ.

ບັນທືກ:ການປ່ຽນແປງນີ້ຈະມີຜົນຕໍ່ກາງການຂຽນທີ່ setTransform() ທີ່ການຂຽນຫຼັງຈາກນັ້ນ.

ຄວາມຄົງຄວາມຄິດ

ການຂຽນຂອງບາງຮູບກາງບອກບາງກາງວ່າ setTransform() ທີ່ການລະບົບຄືນແລະສ້າງກາງການປ່ຽນແປງໃໝ່ອີກຄັ້ງຈາກກາງການຂຽນບາງກາງວ່າ setTransform() ທີ່ການລະບົບຄືນແລະສ້າງກາງການປ່ຽນແປງໃໝ່ອີກຄັ້ງຈາກກາງການຂຽນບາງກາງ. ບໍ່ມີບາງຮູບຂຽວທີ່ສະແດງວ່າສີແດງຫຼັງຄືນຄືນເພາະພວກມັນຢູ່ຫຼັງຮູບຂຽວສີຣັງ.

ບັນຊີບາງບໍ່ສາມາດສະໜັບສະໜູນໄດ້ອັບສັດ5 HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

亲自试一试

语法

context.setTransform(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> ອອກມາຈາກ.

ປືກສາຂອງ HTML5 Canvas