ਐੱਚਟੀਐੱਮਐੱਲ ਕੈਂਵਸ scale() ਮੇਥਡ
ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ
scale() ਮੇਥਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮੌਜੂਦਾ ਚਿੱਤਰ ਨੂੰ ਵੱਡਾ ਜਾਂ ਛੋਟਾ ਕਰੋ。
ਟਿੱਪਣੀਆਂ:ਤੁਹਾਡੇ ਵੱਲੋਂ ਚਿੱਤਰ ਨੂੰ ਸਕੇਲ ਕਰਨ ਤਾਂ ਸਾਰੇ ਬਾਅਦ ਦੇ ਚਿੱਤਰ ਵੀ ਸਕੇਲ ਹੋਣਗੇ। ਸਥਿਤੀ ਵੀ ਸਕੇਲ ਹੋਵੇਗੀ। ਤੁਹਾਡੇ ਵੱਲੋਂ scale(2,2)ਤਾਂ ਚਿੱਤਰ ਕੈਂਵਸ ਦੇ ਉੱਪਲੰਘਣ ਤੋਂ ਦੋ ਗੁਣਾ ਦੂਰ ਸਥਿਤ ਹੋਵੇਗਾ。
ਇੰਸਟੈਂਸ
ਉਦਾਹਰਣ 1
ਚੌਰਾ ਰੈਕਟੈਂਜ ਦਿਖਾਓ, 200% ਵਧਾਓ ਅਤੇ ਫਿਰ ਇੱਕ ਵਾਰ ਚੌਰਾ ਰੈਕਟੈਂਜ ਦਿਖਾਓ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ਸੁਝਾਅ:ਪੰਨੇ ਦੇ ਨੀਚੇ ਹੋਰ ਉਦਾਹਰਣਾਂ ਮਿਲਣਗੇ。
ਸਿਧਾਂਤ
context.scale(scalewidth,scaleheight);
ਪੈਰਾਮੀਟਰ ਦਾ ਮੁੱਲ
| ਪੈਰਾਮੀਟਰ | ਵਰਣਨ |
|---|---|
| scalewidth | ਮੌਜੂਦਾ ਚਿੱਤਰ ਦੀ ਚੌੜਾਈ ਨੂੰ ਸਕੇਲ ਕਰੋ (1=100%, 0.5=50%, 2=200%, ਆਦਿ)。 |
| scaleheight | ਮੌਜੂਦਾ ਚਿੱਤਰ ਦੀ ਉਚਾਈ ਨੂੰ ਸਕੇਲ ਕਰੋ (1=100%, 0.5=50%, 2=200%, ਆਦਿ)。 |
ਹੋਰ ਉਦਾਹਰਣ
ਉਦਾਹਰਣ 2
ਇੱਕ ਚੌਕਾ ਦਰਸਾਓ; 200% ਵਧਾ ਕੇ ਫਿਰ ਚੌਕਾ ਦਰਸਾਓ; 200% ਵਧਾ ਕੇ ਫਿਰ ਚੌਕਾ ਦਰਸਾਓ; 200% ਵਧਾ ਕੇ ਫਿਰ ਚੌਕਾ ਦਰਸਾਓ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ
ਸਾਰੇ ਨੰਬਰਾਂ ਵਿੱਚ ਪਹਿਲੀ ਵਾਰ ਇਸ ਗੁਣ ਦਾ ਪੂਰਣ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਉਜ਼ਰ ਦੀ ਵਰਜਨ ਦਿਸਾਈ ਗਈ ਹੈ。
| ਚਰਮ | ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪੇਰਾ |
|---|---|---|---|---|
| ਚਰਮ | ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪੇਰਾ |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ਟਿੱਪਣੀਆਂ:Internet Explorer 8 ਅਤੇ ਘੱਟ ਤੋਂ ਘੱਟ ਵਰਜਨ ਨਹੀਂ <canvas> ਐਲੀਮੈਂਟ ਸਮਰਥਨ ਕਰਦੇ ਹਨ。
