HTML canvas rect() ਮੱਥੌਦੀ
ਵਿਆਕਰਣ ਅਤੇ ਵਰਤੋਂ
rect() ਮੱਥੌਦੀ ਚੌਕਟੀ ਬਣਾਉਣ ਲਈ ਕਰੇ।
ਸੁਝਾਅ:ਕਿਰਦਾਰ ਵਰਤੋਂ ਕਰੋ: stroke() ਜਾਂ fill() ਮੱਥੌਦੀ ਕੈਂਵਾਸ 'ਤੇ ਚੌਕਟੀ ਦਰਸਾਉਣ ਲਈ ਮੰਗਦੀ ਹੈ。
ਇਨਸਟੈਂਸ
ਉਦਾਹਰਣ 1
150*100 ਪਿਕਸਲ ਚੌਕਟੀ ਦਰਸਾਓ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
ਵਿਆਕਰਣ
context.rect(x,y,width,height);
ਪੈਰਾਮੀਟਰ ਮੁੱਲ
| ਪੈਰਾਮੀਟਰ | ਵਰਣਨ |
|---|---|
| x | ਚੌਕਟੀ ਦੇ ਉੱਪਰਲੇ ਖੱਬੇ ਕੋਨੇ ਦਾ x ਸਕੋਰ |
| y | ਚੌਕਟੀ ਦੇ ਉੱਪਰਲੇ ਖੱਬੇ ਕੋਨੇ ਦਾ y ਸਕੋਰ |
| width | ਚੌਕਟੀ ਦੀ ਚੌੜਾਈ, ਪਿਕਸਲ ਵਿੱਚ ਹੈ。 |
| height | ਚੌਕਟੀ ਦੀ ਹੱਦ, ਪਿਕਸਲ ਵਿੱਚ ਹੈ。 |
ਹੋਰ ਉਦਾਹਰਣ
ਉਦਾਹਰਣ 2
rect() ਮੱਥੌਦੀ ਨਾਲ ਤਿੰਨ ਚੌਕਟੀਆਂ ਬਣਾਓ:
JavaScript:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// ਲਾਲ ਚੌਕਟੀ
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();
// ਹਰੀ ਵਰਤਣ
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
// ਨੀਲਾ ਵਰਤਣ
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ
ਸਾਰੇ ਸਿਫਰ ਸਬੰਧੀ ਪਹਿਲੀ ਸਹੀ ਸਮਰਥਨ ਦੀ ਸ਼੍ਰੇਣੀ ਦਿੱਤੀ ਗਈ ਹੈ。
| ਚਰਮ | ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪਰਾ |
|---|---|---|---|---|
| ਚਰਮ | ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪਰਾ |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ਟਿੱਪਣੀਆਂ:Internet Explorer 8 ਅਤੇ ਉਸ ਤੋਂ ਪਹਿਲੇ ਦੀਆਂ ਸ਼੍ਰੇਣੀਆਂ <canvas> ਐਲੀਮੈਂਟ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦੇ।
