एचटीएमएल कैनवस ड्रॉइनड्राइन () विधि
परिभाषा और उपयोग
drawImage() एचटीएमएल कैनवस ड्रॉइनड्राइन () विधि कैनवस पर छवि, कैनवस या वीडियो चित्रित करती है।
drawImage() विधि को चित्र के कुछ हिस्से को आरेखित करने के लिए भी उपयोग किया जा सकता है, जो चित्र के आकार को बढ़ाने या कम करने में सहायता करता है।
उदाहरण
उदाहरण 1
उपयोग में आने वाला चित्र:
कैनवस पर चित्र को आरेखित करें:
जावास्क्रिप्ट:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
सूचना:पान के नीचे और अधिक उदाहरण मिलेंगे。
व्याकरण
जावास्क्रिप्ट व्याकरण 1
कैनवस पर चित्र को स्थानांतरित करें:
context.drawImage(img,x,y);
जावास्क्रिप्ट व्याकरण 2
कैनवस पर चित्र को स्थानांतरित करें और चित्र का चौड़ाई और ऊंचाई निर्धारित करें:
context.drawImage(img,x,y,width,height);
जावास्क्रिप्ट व्याकरण 3
चित्र को काटें और कैनवस पर काटे गए हिस्से को स्थानांतरित करें:
context.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);
ब्राउज़र समर्थन
तालिका में नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को निर्दिष्ट करते हैं。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
टिप्पणी：Internet Explorer 8 और अधिक पुरानी संस्करण <canvas> एलीमेंट को समर्थन नहीं देते हैं。
