مثال
مقطع من منطقة مستطيلة من 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() | نعم فعلا | تسعة | نعم فعلا | نعم فعلا | نعم فعلا |
تعريف واستخدام
في clip() مقاطع الأسلوب المنطقة من أي شكل وحجم من القماش الأصلي.
نصيحة: عندما يتم قص منطقة، كل رسم المستقبل سيكون محدودا للمنطقة قص (أي الوصول إلى مناطق أخرى على القماش).ولكن هل يمكن أن ينقذ المنطقة قماش الحالية باستخدام save() طريقة قبل استخدام clip() طريقة، واستعادتها (مع restore() طريقة) أي وقت في المستقبل.
| جافا سكريبت بناء الجملة: | context.clip(); |
|---|