HTML कैनवास ड्राइमेज () विधि
उपयोग करने के लिए छवि:
उदाहरण
कैनवास पर चित्र बनाएं:
जावास्क्रिप्ट:
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से विधि का समर्थन करता है।
Method | |||||
---|---|---|---|---|---|
drawImage() | Yes | 9.0 | Yes | Yes | Yes |
परिभाषा और उपयोग
ड्रॉइमेज () विधि कैनवास पर एक छवि, कैनवास या वीडियो खींचती है।
ड्राइमेज () विधि छवि के कुछ हिस्सों को भी खींच सकती है, और / या छवि के आकार को बढ़ा / घटा सकती है।
नोट: छवि लोड होने से पहले आप drawImage() विधि को कॉल नहीं कर सकते हैं। यह सुनिश्चित करने के लिए कि छवि लोड हो गई है, आप window.onload() या document.getElementById(" imageID ").onload से drawImage() को कॉल कर सकते हैं।
जावास्क्रिप्ट सिंटैक्स
छवि को कैनवास पर रखें:
JavaScript syntax: | context.drawImage(img,x,y); |
---|
छवि को कैनवास पर रखें, और छवि की चौड़ाई और ऊंचाई निर्दिष्ट करें:
JavaScript syntax: | context.drawImage(img,x,y,width,height); |
---|
छवि को क्लिप करें और क्लिप किए गए भाग को कैनवास पर रखें:
JavaScript syntax: | context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); |
---|
पैरामीटर मान
Parameter | Description | Play it |
---|---|---|
img | Specifies the image, canvas, or video element to use | |
sx | Optional. The x coordinate where to start clipping | |
sy | Optional. The y coordinate where to start clipping | |
swidth | Optional. The width of the clipped image | |
sheight | Optional. The height of the clipped image | |
x | The x coordinate where to place the image on the canvas | |
y | The y coordinate where to place the image on the canvas | |
width | Optional. The width of the image to use (stretch or reduce the image) | |
height | Optional. The height of the image to use (stretch or reduce the image) |
और ज्यादा उदाहरण
उदाहरण
छवि को कैनवास पर रखें, और छवि की चौड़ाई और ऊंचाई निर्दिष्ट करें:
जावास्क्रिप्ट:
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10, 150, 180);
};
उदाहरण
छवि को क्लिप करें और क्लिप किए गए भाग को कैनवास पर रखें:
जावास्क्रिप्ट:
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
};
उदाहरण
उपयोग करने के लिए वीडियो (प्रदर्शन शुरू करने के लिए Play दबाएं):
कैनवास:
जावास्क्रिप्ट (कोड हर 20 मिलीसेकंड में वीडियो के वर्तमान फ्रेम को खींचता है):
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
var ctx = c.getContext('2d');
var i;
v.addEventListener('play',function() {i=window.setInterval(function()
{ctx.drawImage(v,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
❮ HTML कैनवास संदर्भ