ਐੱਚਟੀਐੱਮਐੱਲ ਕੈਂਵਾਸ translate() ਤਰੀਕਾ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

translate() ਮੰਥਨ ਕਰਨ ਲਈ ਮੰਥਨ ਕਰੋ

ਟਿੱਪਣੀ:ਜਦੋਂ ਤੁਸੀਂ translate() ਦੇ ਬਾਅਦ ਜਿਹੇ ਤਰੀਕਿਆਂ ਨੂੰ ਬੁਲਾਓ fillRect() ਜਿਹੇ ਤਰੀਕਿਆਂ ਦੇ ਸਮੇਂ, ਮੁੱਲ ਫਿਲਟਰ ਵਿੱਚ ਜੋੜਿਆ ਜਾਵੇਗਾ x ਅਤੇ y ਨਿਰਦੇਸ਼ਾਂ 'ਤੇ

translate() ਮੇਥਡ ਦੀ ਚਿੱਤਰਣਾ

ਉਦਾਹਰਣ

ਸਥਾਨ (10,10) 'ਤੇ ਇੱਕ ਚੌਕੇ ਬੈਂਕ ਦਰਸਾਓ, ਨਵਾਂ (0,0) ਸਥਾਨ ਨੂੰ (70,70) ਸੈਟ ਕਰੋ। ਇੱਕ ਵਾਰ ਫਿਰ ਨਵਾਂ ਚੌਕੇ ਬੈਂਕ ਦਰਸਾਓ (ਮਹਿਮਾਨ ਕਿ ਹੁਣ ਚੌਕੇ ਬੈਂਕ (80,80) ਤੋਂ ਦਰਸਾਇਆ ਜਾ ਰਿਹਾ ਹੈ):

ਤੁਹਾਡਾ ਬਰਾਊਜ਼ਰ ਐੱਚਟੀਐੱਮਐੱਲ5 ਕੈਂਵਾਸ ਟੈਗ ਨਹੀਂ ਸਮਰਥਨ ਕਰਦਾ ਹੈ。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

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

ਸ਼ਾਸਤਰ

context.translate(x,y);

ਪੈਰਾਮੀਟਰ ਮੁੱਲ

ਪੈਰਾਮੀਟਰ ਵਰਣਨ
x ਪੱਧਰੀ ਨਾਪ (x) ਉੱਤੇ ਜੋੜੀ ਗਈ ਮੁੱਲ
y ਊਰਦਾ ਨਾਪ (y) ਉੱਤੇ ਜੋੜੀ ਗਈ ਮੁੱਲ

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਰਕਾਰੀ ਸੰਖਿਆਵਾਂ ਵਿੱਚ ਪਹਿਲੀ ਵਾਰ ਇਸ ਗੁਣ ਦਾ ਪੂਰਾ ਸਮਰਥਨ ਕਰਨ ਵਾਲੀ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਦਿਸਾਈ ਗਈ ਹੈ。

ਚਰੋਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਚਰੋਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
4.0 9.0 3.6 4.0 10.1

ਟਿੱਪਣੀ:Internet Explorer 8 ਅਤੇ ਉਸ ਤੋਂ ਪਹਿਲਾਂ ਦੀਆਂ ਸੰਸਕਰਣਾਂ <canvas> ਐਲੀਮੈਂਟ ਨਹੀਂ ਸਮਰਥਨ ਕਰਦੀਆਂ ਹਨ。