روش clip() کانواس

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

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

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

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

مثال

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

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

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 و قدیمی‌تر از Internet Explorer از عنصر <canvas> پشتیبانی نمی‌کنند.

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