HTML ਕੈਨਵਾਸ drawImage() ਮੇਥੋਡ
ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ
drawImage() ਮੇਥੋਡ ਕੈਨਵਾਸ 'ਤੇ ਇਮੇਜ਼, ਕੈਨਵਾਸ ਜਾਂ ਵੀਡੀਓ ਦਰਸਾਉਂਦਾ ਹੈ。
drawImage() ਮੇਥੋਡ ਵੀ ਚਿੱਤਰ ਦੇ ਕੁਝ ਹਿੱਸੇ ਨੂੰ ਦਿਖਾਉਣ ਵਾਲੇ ਹਨ ਅਤੇ/ਜਾਂ ਚਿੱਤਰ ਦੀ ਚੌਦਾਈ ਅਤੇ ਉਚਾਈ ਵਧਾਉਣ ਜਾਂ ਘਟਾਉਣ ਵਾਲੇ ਹਨ।
ਇੰਸਟੈਂਸ
ਉਦਾਹਰਣ 1
ਵਰਤਣ ਵਾਲਾ ਚਿੱਤਰ:
ਕੈਂਵਾਸ 'ਤੇ ਚਿੱਤਰ ਦਿਖਾਓ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
ਸੁਝਾਅ:ਪੰਨੇ ਦੇ ਨਾਲ ਹੋਰ ਉਦਾਹਰਣ ਮਿਲਦੇ ਹਨ。
ਗਰੈਫਿਕਸ
JavaScript ਗਰੈਫਿਕਸ 1
ਕੈਂਵਾਸ 'ਤੇ ਚਿੱਤਰ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕਰੋ:
context.drawImage(img,x,y);
JavaScript ਗਰੈਫਿਕਸ 2
ਕੈਂਵਾਸ 'ਤੇ ਚਿੱਤਰ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕਰੋ ਅਤੇ ਚਿੱਤਰ ਦੀ ਚੌਦਾਈ ਅਤੇ ਉਚਾਈ ਨਿਰਧਾਰਿਤ ਕਰੋ:
context.drawImage(img,x,y,width,height);
JavaScript ਗਰੈਫਿਕਸ 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
ਕੈਂਵਾਸ 'ਤੇ ਚਿੱਤਰ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕਰੋ ਅਤੇ ਚਿੱਤਰ ਦੀ ਚੌਦਾਈ ਅਤੇ ਉਚਾਈ ਨਿਰਧਾਰਿਤ ਕਰੋ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
ਉਦਾਹਰਣ 3
ਚਿੱਤਰ ਕੰਮ ਕਰੋ ਅਤੇ ਕੈਂਵਾਸ 'ਤੇ ਕਟੇ ਹੋਏ ਹਿੱਸੇ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕਰੋ:
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
ਵਰਤਣ ਵਾਲਾ ਵਿਡੀਓ（ਪਲੇ ਬਟਨ ਦਬਾ ਕੇ ਪ੍ਰਦਰਸ਼ਨ ਸ਼ੁਰੂ ਕਰੋ）：
ਕੈਂਵਾਸ:
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> ਐਲੀਮੈਂਟ ਦੀ ਮਦਦ ਕਰਦੇ ਹਨ。
