مثال
مقطع من منطقة مستطيلة من 200 * 120 بكسل من قماش. ثم، رسم مستطيل أحمر. الجزء فقط من المستطيل الأحمر الذي هو داخل منطقة قص مرئيا:
جافا سكريبت:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script> انها محاولة لنفسك » دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل الأسلوب.
| طريقة | |||||
|---|---|---|---|---|---|
| clip() | 4.0 | تسعة | 3.6 | 4.0 | 10.1 |
تعريف والاستخدام
في clip() مقاطع الأسلوب المنطقة في أي الشكل والحجم من القماش الأصلي.
Tip: عندما يتم قص منطقة، كل رسم المستقبل سيكون محدودا للمنطقة قص (no access to other regions on the canvas) . ولكن هل يمكن أن ينقذ المنطقة قماش الحالية باستخدام save() أسلوب قبل استخدام clip() طريقة، واستعادتها (with the restore() طريقة) أي وقت في المستقبل.
| جافا سكريبت بناء الجملة: | context . clip() . |
|---|
<كائن قماش