HTML canvas clip() ਮੱਥੌਦੀ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

clip() ਮੱਥੌਦੀ ਪ੍ਰਾਚੀਨ ਕੈਂਵਾਸ ਤੋਂ ਕਿਸੇ ਵੀ ਸ਼ਕਲ ਅਤੇ ਅਕਾਰ ਦਾ ਖੇਤਰ ਕੱਟਦੀ ਹੈ。

ਸੁਝਾਅ:ਜਦੋਂ ਕੋਈ ਖੇਤਰ ਕੱਟਿਆ ਜਾਵੇ ਤਾਂ ਸਭ ਬਾਅਦ ਦੇ ਆਰਟ ਹਰ ਕੱਟੇ ਖੇਤਰ ਵਿੱਚ ਸੀਮਤ ਹੋ ਜਾਵੇਗਾ (ਕੈਂਵਾਸ ਦੇ ਹੋਰ ਖੇਤਰਾਂ ਤੱਕ ਪਹੁੰਚ ਨਹੀਂ ਹੋਵੇਗੀ)। ਤੁਸੀਂ clip() ਮੱਥੌਦੀ ਦੇ ਪਹਿਲਾਂ save() ਮੱਥੌਦੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮੌਜੂਦਾ ਕੈਂਵਾਸ ਖੇਤਰ ਨੂੰ ਸੰਭਾਲ ਸਕਦੇ ਹੋ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਕਿਸੇ ਵੀ ਸਮੇਂ ਉਸ ਨੂੰ ਪੁਨਰ ਲੈ ਸਕਦੇ ਹੋ (restore() ਮੱਥੌਦੀ ਰਾਹੀਂ)。

ਮਾਡਲ

200*120 ਪਿਕਸਲ ਦਾ ਚੁਨਾਈ ਖੇਤਰ ਕੈਂਵਾਸ ਤੋਂ ਕੱਟੋ। ਫਿਰ ਹਰੀ ਰੈਂਜਿਟ ਦਰਸਾਓ। ਕੱਟੇ ਖੇਤਰ ਵਿੱਚ ਹਰੀ ਰੈਂਜਿਟ ਹੀ ਦਿਸਦੀ ਹੈ:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// ਕੀਟ ਚੌਕਾ ਖੇਤਰ
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// clip() ਦੇ ਬਾਅਦ ਹਰੀ ਚੌਕਾ ਬਣਾਓ
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਗਰੰਥ

context.clip();

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

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

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

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