HTML canvas setTransform() ਮੇਥੋਡ
ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ
ਕੈਂਵਸ 'ਤੇ ਹਰ ਇੱਕ ਬਾਹਰੀ ਆਬਜੈਕਟ ਨੂੰ ਇੱਕ ਮੌਜੂਦਾ ਟ੍ਰਾਂਸਫਾਰਮ ਮੈਟ੍ਰਿਕਸ ਹੁੰਦਾ ਹੈ
setTransform() ਮੇਥੋਡ ਮੌਜੂਦਾ ਟ੍ਰਾਂਸਫਾਰਮ ਮੈਟ੍ਰਿਕਸ ਨੂੰ ਇਕਾਈ ਮੈਟ੍ਰਿਕਸ ਵਿੱਚ ਰੀਸਟਰ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸੇ ਪੈਰਾਮੀਟਰਾਂ ਨਾਲ ਚਲਾਉਂਦਾ ਹੈ transform().
ਫਿਰ ਵੀ setTransform() ਤੁਹਾਨੂੰ ਮੌਜੂਦਾ ਮਾਹੌਲ ਨੂੰ ਸਕੇਲ, ਰੋਟੇਟ, ਸਕ੍ਰੋਲ ਅਤੇ ਸਲੇਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ。
ਟਿੱਪਣੀਆਂ:ਇਹ ਟ੍ਰਾਂਸਫਾਰਮ ਸਿਰਫ setTransform() ਮੇਥੋਡ ਬੁਲਾਉਣ ਦੇ ਬਾਅਦ ਦੇ ਚਿੱਤਰਨ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ。
ਉਦਾਹਰਣ
ਇੱਕ ਚੱਕਰ ਦਰਸਾਓ, ਨਾਲ ਹੀ setTransform() ਨਾਲ ਰੀਸਟਰ ਕਰਕੇ ਨਵਾਂ ਟ੍ਰਾਂਸਫਾਰਮ ਮੈਟ੍ਰਿਕਸ ਬਣਾਓ, ਫਿਰ ਇੱਕ ਵਾਰ ਹੋਰ ਚੱਕਰ ਦਰਸਾਓ, ਰੀਸਟਰ ਕਰਕੇ ਨਵਾਂ ਟ੍ਰਾਂਸਫਾਰਮ ਮੈਟ੍ਰਿਕਸ ਬਣਾਓ ਅਤੇ ਫਿਰ ਇੱਕ ਵਾਰ ਹੋਰ ਚੱਕਰ ਦਰਸਾਓ। ਧਿਆਨ ਦਿਓ ਕਿ ਹਰ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ setTransform() ਨੂੰ ਬੁਲਾਉਂਦੇ ਹੋ, ਉਹ ਪਹਿਲਾਂ ਦਾ ਟ੍ਰਾਂਸਫਾਰਮ ਮੈਟ੍ਰਿਕਸ ਰੀਸਟਰ ਕਰਦਾ ਹੈ ਅਤੇ ਨਵਾਂ ਮੈਟ੍ਰਿਕਸ ਬਣਾਉਂਦਾ ਹੈ। ਇਸ ਲਈ ਨਿਚੇ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਲਾਲ ਚੱਕਰ ਨਹੀਂ ਦਿਖਾਈ ਦੇਵੇਗਾ ਕਿਉਂਕਿ ਉਹ ਨੀਲੇ ਚੱਕਰ ਦੇ ਨੀਚੇ ਹੈ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
ਸਿੰਟੈਕਸ
context.setTransform(a,b,c,d,e,f);
ਪੈਰਾਮੀਟਰ ਮੁੱਲ
| ਪੈਰਾਮੀਟਰ | ਵਰਣਨ |
|---|---|
| a | ਖੱਡੀ ਸਾਈਜ਼ ਪਰਿਵਰਤਨ ਚਿੱਤਰਨ |
| b | ਖੱਡੀ ਸਾਈਜ਼ ਪਰਿਵਰਤਨ ਚਿੱਤਰਨ |
| c | ਖੱਡੀ ਸਾਈਜ਼ ਪਰਿਵਰਤਨ ਚਿੱਤਰਨ |
| d | ਖੱਡੀ ਸਾਈਜ਼ ਪਰਿਵਰਤਨ ਚਿੱਤਰਨ |
| e | ਖੱਡੀ ਗਤੀਸ਼ੀਲ ਚਿੱਤਰਨ |
| f | ਖੱਡੀ ਗਤੀਸ਼ੀਲ ਚਿੱਤਰਨ |
ਬਰਸਰ ਸਪੋਰਟ
ਸਾਰੇ ਸਤਰ ਵਿੱਚ ਨੰਬਰ ਇਹ ਪਹਿਲੀ ਸਾਰੀ ਇਸ ਵਿਸ਼ੇ ਦੀ ਸਪੂਰਨ ਬਰਸਰ ਸੰਸਕਰਣ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ。
| ਚਰਮੋਇਲ | ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪਰਾ |
|---|---|---|---|---|
| ਚਰਮੋਇਲ | ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪਰਾ |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ਟਿੱਪਣੀਆਂ:Internet Explorer 8 ਅਤੇ ਪਹਿਲੇ ਦੇ ਸਬੰਧਤ ਵੈਂਡਰਜ਼ ਨੇ <canvas> ਐਲੀਮੈਂਟ ਨੂੰ ਸਪੋਰਟ ਨਹੀਂ ਕੀਤਾ।
