Canvas globalCompositeOperation ਪ੍ਰਤੀਭਾਵ

Canvas مراجع

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

globalCompositeOperation ਪ੍ਰਤੀਭਾਵ ਸੈਟਿੰਗ ਜਾਂ ਵਾਪਸ ਕਰਨ ਲਈ ਕਿਵੇਂ ਇੱਕ ਸਰੋਤ (ਨਵਾਂ) ਚਿੱਤਰ ਨੂੰ ਟੀਚੇ (ਮੌਜੂਦਾ) ਚਿੱਤਰ 'ਤੇ ਚਿੱਤਰਤ ਕੀਤਾ ਜਾਵੇ।

ਸਰੋਤ ਚਿੱਤਰ = ਤੁਸੀਂ ਕੈਂਵਸ 'ਤੇ ਪਾਉਣ ਵਾਲੇ ਚਿੱਤਰ。

ਟੀਚੇ ਚਿੱਤਰ = ਤੁਸੀਂ ਕੈਂਵਸ ਉੱਤੇ ਪਾਏ ਹੋਏ ਚਿੱਤਰ。

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਵੱਖ-ਵੱਖ globalCompositeOperation ਕੀਮਤਾਂ ਨਾਲ ਚੌਰਾਹੇ ਦਰਸਾਉਣ ਲਈ ਵਰਤੋਂ ਕਰੋ। ਲਾਲ ਚੌਰਾਹਾ ਟੀਚੇ ਚਿੱਤਰ ਹੈ। ਨੀਲਾ ਚੌਰਾਹਾ ਸਰੋਤ ਚਿੱਤਰ ਹੈ:

　　　　　source-over 　　　　　　　　　　　　destination-over

ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ canvas ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦਾ。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);

ਸੁਤੇਰੇ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2

ਸਾਰੇ globalCompositeOperation ਗੁਣ ਮੁੱਲਾਂ:

ਸੁਤੇਰੇ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਵਿਧੀ

context.globalCompositeOperation="source-in";

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
source-over ਮੂਲਰਤਨ
source-atop ਟੀਚ ਚਿੱਤਰ ਦੇ ਉੱਪਰ ਸਰੋਤ ਚਿੱਤਰ ਦਿਸਾਓ। ਸਰੋਤ ਚਿੱਤਰ ਦਾ ਟੀਚ ਚਿੱਤਰ ਤੋਂ ਬਾਹਰ ਹਿੱਸਾ ਅਸਾਨੀ ਨਾਲ ਨਹੀਂ ਦਿਸੇਗਾ。
source-in ਟੀਚ ਚਿੱਤਰ ਵਿੱਚ ਸਰੋਤ ਚਿੱਤਰ ਦਿਸਾਓ। ਸਿਰਫ ਟੀਚ ਚਿੱਤਰ ਵਿੱਚ ਸਰੋਤ ਚਿੱਤਰ ਦਾ ਹਿੱਸਾ ਦਿਸੇਗਾ، ਟੀਚ ਚਿੱਤਰ ਪਾਰਦਰਸ਼ੀ ਹੋਵੇਗਾ。
source-out ਟੀਚ ਚਿੱਤਰ ਤੋਂ ਬਾਹਰ ਸਰੋਤ ਚਿੱਤਰ ਦਿਸਾਓ। ਸਿਰਫ ਟੀਚ ਚਿੱਤਰ ਤੋਂ ਬਾਹਰ ਸਰੋਤ ਚਿੱਤਰ ਦਾ ਹਿੱਸਾ ਦਿਸੇਗਾ، ਟੀਚ ਚਿੱਤਰ ਪਾਰਦਰਸ਼ੀ ਹੋਵੇਗਾ。
destination-over ਸਰੋਤ ਚਿੱਤਰ ਉੱਪਰ ਟੀਚ ਚਿੱਤਰ ਦਿਸਾਓ。
destination-atop ਸਰੋਤ ਚਿੱਤਰ ਦੇ ਉੱਪਰ ਟੀਚ ਚਿੱਤਰ ਦਿਸਾਓ। ਸਰੋਤ ਚਿੱਤਰ ਤੋਂ ਬਾਹਰ ਟੀਚ ਚਿੱਤਰ ਦਾ ਹਿੱਸਾ ਨਾ ਦਿਸੇਗਾ。
destination-in ਸਰੋਤ ਚਿੱਤਰ ਵਿੱਚ ਟੀਚ ਚਿੱਤਰ ਦਿਸਾਓ। ਸਿਰਫ ਸਰੋਤ ਚਿੱਤਰ ਵਿੱਚ ਟੀਚ ਚਿੱਤਰ ਦਾ ਹਿੱਸਾ ਦਿਸੇਗਾ، ਸਰੋਤ ਚਿੱਤਰ ਪਾਰਦਰਸ਼ੀ ਹੋਵੇਗਾ。
destination-out ਸਰੋਤ ਚਿੱਤਰ ਤੋਂ ਬਾਹਰ ਟੀਚ ਚਿੱਤਰ ਦਿਸਾਓ। ਸਿਰਫ ਸਰੋਤ ਚਿੱਤਰ ਤੋਂ ਬਾਹਰ ਟੀਚ ਚਿੱਤਰ ਦਾ ਹਿੱਸਾ ਦਿਸੇਗਾ， ਸਰੋਤ ਚਿੱਤਰ ਪਾਰਦਰਸ਼ੀ ਹੋਵੇਗਾ。
ਕੇਸ਼ਮੀ ਕਰੋ ਸਰੋਤ ਚਿੱਤਰ + ਟੀਚ ਚਿੱਤਰ ਦਿਸਾਓ。
ਕਾਪੀ ਸਰੋਤ ਚਿੱਤਰ ਦਿਸਾਓ। ਟੀਚ ਚਿੱਤਰ ਨੂੰ ਨਾ ਧਿਆਨ ਦੇਓ。
xor مقابلتی عمل کو استعمال کرکے سورس عکس اور مقصد عکس کو جوڑا جاتا ہے。

تکنیکی تفصیلات

مقصد: source-over

براوزر دعومت

جداول میں دکھائی گئی اعداد، اس کی خاصیت کا پہلا پورا حمایتی براوزر کی نسلیں کا ذکر کرتی ہیں。

کروم ایج فائرفاکس سافری آپرا
کروم ایج فائرفاکس سافری آپرا
4.0 9.0 3.6 4.0 10.1

تعلیمات:Internet Explorer 8 اور اس سے پہلے کی نسلیں <canvas> عناصر کو نہیں دعومت دیتے ہیں。

Canvas مراجع