HTML कैनवस clip() विधि

HTML5 Canvas संदर्भ दस्तावेज़

विभाषण और उपयोग

clip() विधि मूल कैनवस से किसी भी आकार और आकृति का काट लेती है。

सूचना:एक क्षेत्र को काटने के बाद, सभी बाद के चित्रकारी कार्य उस काटे गए क्षेत्र के भीतर ही सीमित रहेंगे (कैनवस के अन्य क्षेत्रों की पहुंच नहीं होगी)। आप 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

टिप्पणी：Internet Explorer 8 और अधिक पुरानी संस्करण <canvas> एलीमेंट को समर्थन नहीं देते हैं。

HTML5 Canvas संदर्भ दस्तावेज़