طريقة Canvas clip()

دليل مرجعي 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>.

دليل مرجعي Canvas