कैनवस clip() विधि
विवरण और उपयोग
clip() विधि मूल कैनवस से किसी भी आकार और आकृति को काटती है。
टिप्पणी:एक क्षेत्र को काटने के बाद, सभी बाद के चित्रण केवल काटे गए क्षेत्र में सीमित रहेंगे (कैनवस के अन्य क्षेत्रों की पहुंच नहीं होगी)। आप भी clip() विधि के पहले save() विधि का उपयोग करके वर्तमान कैनवस क्षेत्र को सहेज सकते हैं और बाद में किसी भी समय उसे पुन: प्राप्त कर सकते हैं (restore() विधि के माध्यम से)।
उदाहरण
200*120 पिक्सल के चीनी रंग के चतुर्भुज क्षेत्र को कैनवस से काटें। फिर, लिंक रंग के चतुर्भुज को दूरबीन बनाएं। केवल काटे गए क्षेत्र के चीनी रंग का भाग दूरबीन में दिखाई देता है:
जेसक्रिप्ट:
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> एलीमेंट को समर्थित नहीं किया।
