知道画布HTML5中的源和滞留之间的差异

Question

我在W3S上尝试了以下代码 并且他们说蓝色rect是源，红色是目的地，我需要知道他们是如何确定的，是订单还是其他东西？

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

Answer 1

使用合成时......

'目的地'始终引用画布上的现有像素。

'source'始终引用要添加到画布的新像素。

当源像素被绘制到画布时，它们将成为目标像素。