طريقة HTML canvas clip()

دليل مرجعي HTML5 Canvas

تعريف واستخدام

clip() يقطع الطريقة أي شكل و حجم من الطلاء الأصلي.

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

دليل مرجعي HTML5 Canvas