HTML canvas globalCompositeOperation ਪ੍ਰਤੀਭਾ

HTML5 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 ਸੋਰਸ ਇਮੇਜ ਤੋਂ ਬਾਹਰ ਟਾਰਗੇਟ ਇਮੇਜ ਦਿਸਾਈ ਗਈ ਹੈ।ਸਿਰਫ ਸੋਰਸ ਇਮੇਜ ਤੋਂ ਬਾਹਰ ਟਾਰਗੇਟ ਇਮੇਜ ਦਾ ਹਿੱਸਾ ਦਿਸਾਈ ਗਿਆ ਹੈ, ਸੋਰਸ ਇਮੇਜ ਪਾਰਦਰਸ਼ੀ ਹੈ。
lighter ਸੋਰਸ ਇਮੇਜ + ਟਾਰਗੇਟ ਇਮੇਜ ਦਿਸਾਈ ਗਈ ਹੈ。
copy ਸੋਰਸ ਇਮੇਜ ਦਿਸਾਈ ਗਈ ਹੈ।ਟਾਰਗੇਟ ਇਮੇਜ ਨੂੰ ਨਾ ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ。
xor ਸੋਰਸ ਇਮੇਜ ਅਤੇ ਟਾਰਗੇਟ ਇਮੇਜ ਨੂੰ ਐਕਸਾਰ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਵਰਤੋਂ ਕਰੋ。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਰੂਪ: source-over

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

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

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

ਟਿੱਪਣੀਆਂ:Internet Explorer 8 ਅਤੇ ਪੁਰਾਣੇ ਸ਼ਾਮਿਲ ਹਨ <canvas> ਇਲੈਕਟ੍ਰੌਨਿਕ ਪ੍ਰਤੀਯੋਗੀ ਨਹੀਂ ਸਮਰੱਥ ਹੈ。

HTML5 Canvas ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ