HTML कैनवास ड्राइमेज () विधि
उपयोग करने के लिए छवि:
उदाहरण
कैनवास पर चित्र बनाएं:
जावास्क्रिप्ट:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से विधि का समर्थन करता है।
Method | |||||
---|---|---|---|---|---|
drawImage() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
परिभाषा और उपयोग
ड्रॉइमेज () विधि कैनवास पर एक छवि, कैनवास या वीडियो खींचती है।
ड्राइमेज () विधि छवि के कुछ हिस्सों को भी खींच सकती है, और / या छवि के आकार को बढ़ा / घटा सकती है।
जावास्क्रिप्ट सिंटैक्स
छवि को कैनवास पर रखें:
जावास्क्रिप्ट सिंटैक्स: | संदर्भ । ड्राइमेज (आईएमजी , एक्स, वाई ); |
---|
छवि को कैनवास पर रखें, और छवि की चौड़ाई और ऊंचाई निर्दिष्ट करें:
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) |
और ज्यादा उदाहरण
उदाहरण
छवि को कैनवास पर रखें, और छवि की चौड़ाई और ऊंचाई निर्दिष्ट करें:
जावास्क्रिप्ट:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10, 150, 180);
उदाहरण
छवि को क्लिप करें और क्लिप किए गए भाग को कैनवास पर रखें:
जावास्क्रिप्ट:
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");
ctx = c.getContext('2d');
v.addEventListener('play', function() {var 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);
❮ कैनवास वस्तु