مетод Canvas clip()

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

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

توجه:وقتی منطقه‌ای برش داده شد، تمام ترسیم‌های بعدی محدود به منطقه برش‌داده شده خواهند بود (نمی‌توان به مناطق دیگر کانواس دسترسی داشت). شما همچنین می‌توانید از روش save() برای ذخیره منطقه فعلی کانواس استفاده کنید و در هر زمانی که بخواهید آن را بازیابی کنید (از طریق روش 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();

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

کروم ایج فائرفاکس سافری آپرا
کروم ایج فائرفاکس سافری آپرا
4.0 9.0 3.6 4.0 10.1

نوٹ:اینٹرنیشنل ایکسپلورر 8 اور اس سے پچھلے کی نسلیں <کانواس> علامت کو نہیں سپورٹ کرتی ہیں۔