Canvas clip() ກົນລະບຽບ

Canvas 参考手册

ການສະແດງ ແລະ ການນໍາໃຊ້

clip() ກົນລະບຽບຈະຕັດສິນລະບົບທາງພາສາຫຼັງຂອງຕົວແທນ.

ຂໍ້ສັງເກດ:ບໍ່ດົນຫຼັງຈາກຕັດສິນລະບົບບາງຂອງ, ການຂຽນຂອງຫຼັງຈາກນັ້ນຈະຖືກຈຳກັດໃນພາກຕັດສິນລະບົບ (ບໍ່ສາມາດເຂົ້າເຖິງພາກອື່ນຂອງຕົວແທນ). ທ່ານກໍ່ສາມາດຮັກສາພາກຕົວແທນຂອງຕົວຈອງໃນຕອນຕົ້ນຜ່ານການໃຊ້ກົນລະບຽບ save() ແລະ ທ່ານສາມາດຮັກສາຄືນພາກຕົວແທນພາຍໃນຕອນຕໍ່ມາ (ຜ່ານກົນລະບຽບ restore() ).

ຕົວຢ່າງ

ຈາກການຕັດສິນລະບົບຂອງຕົວຈອງ 200*120 ພັນຂອງຕົວຈອງ. ຫຼັງຈາກນັ້ນ, ຂຽນຟີນສີຂຽວ. ພຽງແຕ່ພາກຂຽວຂອງຟີນສີຂຽວທີ່ຕັດສິນລະບົບທີ່ເຫັນຄືນ:

ບັນດາບານອາວະຈັດຂອງທ່ານບໍ່ສາມາດສະໜັບສະໜູນຕົວແທນ HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// ຕັດສິນລະບົບຂອງຕົວຈອງຂຽວ
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// ພາສາຫຼັງຂອງ clip() ຂຽນຟີນສີຂຽວ
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

亲自试一试

语法

context.clip();

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注释：Internet Explorer 8 以及更早的版本不支持 元素。

Canvas 参考手册