روش clip() صفحه‌نمایش HTML

دستورالعمل‌های HTML5 Canvas

تعریف و استفاده

clip() این روش از صفحه‌نمایش اصلی می‌تواند هر شکل و اندازه‌ای را برش دهد.

توضیحات:وقتی یک منطقه‌ای برش داده شد، تمام تصاویر بعدی محدود به منطقه برش‌داده می‌شوند (نمی‌توان به مناطق دیگر صفحه‌نمایش دسترسی داشت). همچنین می‌توانید قبل از استفاده از روش clip() از روش save() برای ذخیره کردن منطقه فعلی صفحه‌نمایش استفاده کنید و در هر زمان بعدی آن را بازیابی کنید (با استفاده از روش restore()).

مثال

منطقه‌ای به اندازه 200*120 پیکسل از صفحه‌نمایش برش دهید. سپس، مستطیل سبز را رسم کنید. تنها بخش سبز مستطیل که در داخل منطقه برش‌داده قرار دارد قابل مشاهده است:

تگ کانواس از مرورگر شما پشتیبانی نمی‌کند.

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

نکته:نسخه‌های 8 و قدیمی‌تر اینترنت اکسپلورر از عنصر <canvas> پشتیبانی نمی‌کنند.

دستورالعمل‌های HTML5 Canvas