ວິທະຍາສາດ HTML canvas scale()
ການອະທິບາຍ ແລະ ການນໍາໃຊ້
scale() ວິທະຍາສາດຂະຫຍາຍພາບຫົວໜ້າຫົວສຳຫຼວດ, ຫຼາຍຫຼາຍຫຼາຍຫຼາຍຫຼາຍຫຼາຍ.
ຄໍາເຫັນ:ຖ້າທ່ານຂະຫຍາຍພາບຫົວໜ້າຫົວສຳຫຼວດ, ພາບຫົວໜ້າຫົວສຳຫຼວດຫຼັງຈາກນັ້ນກໍ່ຈະຖືກຂະຫຍາຍ. ການຕິດຕັ້ງຍັງຈະຖືກຂະຫຍາຍ. ຖ້າທ່ານເວົ້າ scale(2,2)ຖ້າມີການຂະຫຍາຍພາບຫົວໜ້າຫົວສຳຫຼວດ, ພາບຫົວໜ້າຫົວສຳຫຼວດຫຼັງຈາກນັ້ນກໍ່ຈະຖືກຂະຫຍາຍ. ການຕິດຕັ້ງຍັງຈະຖືກຂະຫຍາຍ.
ຄວາມຄິດຄະເນ
ຄວາມຄິດຄະເນ 1
ຂຽນພາບຂະໜາດສູງ 200%, ຕື່ມອີກພາບຂະໜາດຫຼາຍອີກອີກອີກ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ຄຳເຕືອນ:ມີຫຼັກສັນຍາວິທະຍາສາດຫຼາຍຫຼາຍທີ່ຕິດຕັ້ງຢູ່ດ້ານບາງກ້ອງ。
ວິທະຍາສາດ
context.scale(scalewidth,scaleheight);
ຄູ່ມູນຄວາມຄືນ
| ພຽງພໍ | ການອະທິບາຍ |
|---|---|
| scalewidth | ການຂະຫຍາຍຄວາມວົງວຽນຂອງພາບຫົວໜ້າຫົວສຳຫຼວດ (1=100%, 0.5=50%, 2=200%, ຕື່ມອີກ)。 |
| scaleheight | ການຂະຫຍາຍຄວາມສູງຂອງພາບຫົວໜ້າຫົວສຳຫຼວດ (1=100%, 0.5=50%, 2=200%, ຕື່ມອີກ)。 |
更多实例
例子 2
绘制一个矩形；放大到 200%，再次绘制矩形；放大到 200%，然后再次绘制矩形；放大到 200%，再次绘制矩形：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ການສະໜັບສະໜູນບັນດາບັນດາບັນດາ
ຈຳນວນໃນຕາລະບົດສະແດງວ່າສະບັບສະໜັບສະໜູນອັນທຳອິດຂອງປະສົມປະສານດັ່ງກ່າວ.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ຄໍາເຫັນ:Internet Explorer 8 ແລະອາຍຸຫຼັງນັ້ນບໍ່ສາມາດສະໜັບສະໜູນ <canvas> ສິ່ງ.
