شروع کار مقدماتی با HTML5 Canvas (جلسه 23) : Compositing یا ترکیب کردن - قسمت 2

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.fillStyle="#09f";

ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation='destination-over';

ctx.fillStyle="#f30";

ctx.beginPath();

ctx.arc(75,75,35,0,Math.PI*2,true);

ctx.fill();

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.fillStyle="#09f";

ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation='destination-in';

ctx.fillStyle="#f30";

ctx.beginPath();

ctx.arc(75,75,35,0,Math.PI*2,true);

ctx.fill();

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.fillStyle="#09f";

ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation='destination-out';

ctx.fillStyle="#f30";

ctx.beginPath();

ctx.arc(75,75,35,0,Math.PI*2,true);

ctx.fill();

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.fillStyle="#09f";

ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation='destination-atop';

ctx.fillStyle="#f30";

ctx.beginPath();

ctx.arc(75,75,35,0,Math.PI*2,true);

ctx.fill();

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.fillStyle="#09f";

ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation='lighter';

ctx.fillStyle="#f30";

ctx.beginPath();

ctx.arc(75,75,35,0,Math.PI*2,true);

ctx.fill();

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.fillStyle="#09f";

ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation='copy';

ctx.fillStyle="#f30";

ctx.beginPath();

ctx.arc(75,75,35,0,Math.PI*2,true);

ctx.fill();

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.fillStyle="#09f";

ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation='xor';

ctx.fillStyle="#f30";

ctx.beginPath();

ctx.arc(75,75,35,0,Math.PI*2,true);

ctx.fill();