知道畫布中源和滯後的不同HTML5

我試過W3S 下面的代碼，他們說藍色矩形是源代碼，紅色代碼是目標，我需要知道他們是如何確定的，是它的順序還是有別的？知道畫布中源和滯後的不同HTML5

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);

來源

2016-03-08 Abdullah Alshaibany

你所畫的是你繪製時的源代碼。你所畫的是目的地。如果您稍後再繪製它，源將成爲目標，並且目標甚至可以成爲源;-) – Kaiido

當使用合成...

'目標'總是指在畫布上現有的像素。

'來源'始終是指正在添加到畫布的新像素。

當源像素已被繪製到畫布上時，它們將成爲目標像素。

來源

2016-03-08 18:13:26 markE

知道畫布中源和滯後的不同HTML5

回答

相關問題