Canvas drawImage() روش

Canvas ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ

تعریف و استفاده

drawImage() روش در صفحه کوچک کاری کاری کیت تصویر کوچک کاری کیت، صفحه کوچک کاری کاری کیت یا ویدیو نقاشی می‌کند.

drawImage() روش‌ها نیز می‌توانند برخی از بخش‌های تصویر کوچک کاری کیت را نقاشی کنند، و/یا اضافه یا کاهش اندازه تصویر کوچک کاری کیت را انجام دهند.

مثال

مثال 1

تصویر کوچک کاری کیت مورد استفاده:

تولپ

تصویر کوچک کاری کیت را روی صفحه کوچک کاری کاری کیت نقاشی می‌کند:

ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ HTML5 ਕੈਂਵਾਸ ਟੈਗ ਨਹੀਂ ਸਮਰਥਨ ਕਰਦਾ ਹੈ。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

تذکر:مثال‌های بیشتری در پایین صفحه موجود است.

زبان

جسمانی 1

تصویر کوچک کاری کیت کجاست:

کینکس.اُمتیازیImage(img,x,y);

جسمانی 2

تصویر کوچک کاری کیت کجاست، و عرض و بلندی تصویر کوچک کاری کیت تعیین می‌کند:

کینکس.اُمتیازیImage(img,x,y,width,height);

جسمانی 3

تصویر کوچک کاری کیت، و جزء کوچک تصویر کوچک کاری کیت کجاست:

کینکس.اُمتیازیImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数اُمتیازی

参数 ਵਰਣਨ
img ਵਰਤਣ ਵਾਲਾ ਚਿੱਤਰ، ਕੈਂਵਾਸ ਜਾਂ ਵਿਡੀਓ
sx ਵਿਕਲਪਿਤ। ਕੱਪੜੇ ਦੀ ਸ਼ੁਰੂਆਤ ਦੀ x ਅਕਸਰ ਸਥਾਨ
sy ਵਿਕਲਪਿਤ। ਕੱਪੜੇ ਦੀ ਸ਼ੁਰੂਆਤ ਦੀ y ਅਕਸਰ ਸਥਾਨ
swidth ਵਿਕਲਪਿਤ। ਕੱਪੜੇ ਦੀ ਚੌਡਾਈ
sheight ਵਿਕਲਪਿਤ। ਕੱਪੜੇ ਦੀ ਉਚਾਈ
x ਕੈਂਵਾਸ 'ਤੇ ਚਿੱਤਰ ਦੀ x ਅਕਸਰ ਸਥਾਨ
y ਕੈਂਵਾਸ 'ਤੇ ਚਿੱਤਰ ਦੀ y ਅਕਸਰ ਸਥਾਨ
width ਵਿਕਲਪਿਤ। ਵਰਤਣ ਵਾਲੇ ਚਿੱਤਰ ਦੀ ਚੌਡਾਈ। (ਚਿੱਤਰ ਨੂੰ ਵਧਾਉਣ ਜਾਂ ਛੂਟਾ ਦੇਣ)
height ਵਿਕਲਪਿਤ। ਵਰਤਣ ਵਾਲੇ ਚਿੱਤਰ ਦੀ ਉਚਾਈ। (ਚਿੱਤਰ ਨੂੰ ਵਧਾਉਣ ਜਾਂ ਛੂਟਾ ਦੇਣ)

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 2

ਕੈਂਵਾਸ 'ਤੇ ਚਿੱਤਰ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕਰੋ ਅਤੇ ਚਿੱਤਰ ਦੇ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਨਿਰਧਾਰਿਤ ਕਰੋ:

ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ HTML5 ਕੈਂਵਾਸ ਟੈਗ ਨਹੀਂ ਸਮਰਥਨ ਕਰਦਾ ਹੈ。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 3

ਚਿੱਤਰ ਕੱਪੜੇ ਅਤੇ ਕੈਂਵਾਸ 'ਤੇ ਕੱਪੜੇ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕਰੋ:

ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ HTML5 ਕੈਂਵਾਸ ਟੈਗ ਨਹੀਂ ਸਮਰਥਨ ਕਰਦਾ ਹੈ。

JavaScript:

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

ਵਰਤਣ ਵਾਲਾ ਵਿਡੀਓ（ਪਲੇ ਬਟਨ ਦਬਾ ਕੇ ਪ੍ਰਦਰਸ਼ਨ ਸ਼ੁਰੂ ਕਰੋ）：

ਕੈਂਵਾਸ：

ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ HTML5 ਕੈਂਵਾਸ ਟੈਗ ਨਹੀਂ ਸਮਰਥਨ ਕਰਦਾ ਹੈ。

JavaScript （ਹਰ 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> ਆਬੋਦਾ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੱਤਾ ਹੈ。

Canvas ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ