कैनवस drawImage() विधि
परिभाषा और उपयोग
drawImage() विधि कानवस पर चित्र, कानवस या वीडियो ड्राइब्लूट करती है。
drawImage() यह विधि चित्र के कुछ हिस्से को ड्राइब्लूट करने और/या चित्र के आकार को बढ़ाने या कम करने के लिए भी काम करती है。
इस्तरा
उदाहरण 1
इस्तेमाल करने वाला चित्र:
कानवस पर चित्र ड्राइब्लूट करें:
जावास्क्रिप्ट:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
सूचना:पृष्ठ के नीचे अधिक उदाहरण उपलब्ध हैं。
ग्रामर
जेसक्रिप्ट ग्रामर 1
चित्र को कानवस पर अंकित करें:
कंटेक्स्ट.drawImage(img,x,y);
जेसक्रिप्ट ग्रामर 2
चित्र को कानवस पर अंकित करें और चित्र की चौड़ाई और ऊंचाई निर्धारित करें:
कंटेक्स्ट.drawImage(img,x,y,width,height);
जेसक्रिप्ट ग्रामर 3
चीनाई इमेज को काटें और चित्रचित्र के ऊपर अंकित होने की स्थिति निर्धारित करें:
कंटेक्स्ट.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
पैरामीटर मूल्य
| 参数 | वर्णन |
|---|---|
| img | उपयोग करने वाली छवि, कैनवस या वीडियो को निर्धारित करें. |
| sx | काटे हुए स्थान की x स्थानांकन स्थिति (वृद्धि या कमी करने के लिए उपयोग के लिए): |
| sy | काटे हुए स्थान की y स्थानांकन स्थिति (वृद्धि या कमी करने के लिए उपयोग के लिए): |
| swidth | काटे हुए छवि की चौड़ाई (वृद्धि या कमी करने के लिए उपयोग के लिए): |
| sheight | काटे हुए छवि की ऊंचाई (वृद्धि या कमी करने के लिए उपयोग के लिए): |
| x | कैनवस पर छवि की x स्थानांकन स्थिति. |
| y | कैनवस पर छवि की y स्थानांकन स्थिति. |
| width | वृद्धि या कमी करने के लिए उपयोग के लिए छवि की चौड़ाई (छवि को फैलाएं या संकुचित करें): |
| height | वृद्धि या कमी करने के लिए उपयोग के लिए छवि की ऊंचाई (छवि को फैलाएं या संकुचित करें): |
और अधिक उदाहरण
उदाहरण 2
कैनवस पर छवि का स्थान निर्धारित करें और छवि का चौड़ाई और ऊंचाई निर्धारित करें:
जावास्क्रिप्ट:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
उदाहरण 3
चित्र को काटें और कैनवस पर काटे हुए भाग का स्थान निर्धारित करें:
जावास्क्रिप्ट:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);
उदाहरण 4
उपयोग के लिए वीडियो (प्लेबटन दबाएं दिखाने के लिए):
कैनवस:
जावास्क्रिप्ट (प्रति 20 मिलीसेकंड, कोड वीडियो के वर्तमान फ्रेम को दूरी बनाएगा):
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()
{ctx.drawImage(v,0,0,270,135);},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
ब्राउज़र समर्थन
तालिका में अनुभवित संस्करण को सूचीबद्ध किया गया है, जो पहली बार इस गुण को पूरी तरह से समर्थित करता है।
| च्रोम | एज | फायरफॉक्स | सफारी | ऑपेरा |
|---|---|---|---|---|
| च्रोम | एज | फायरफॉक्स | सफारी | ऑपेरा |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
टिप्पणी:Internet Explorer 8 और अधिक पुरानी संस्करण <canvas> एलीमेंट को नहीं समर्थित करते।
