html - 了解canvas HTML5中source和destination的区别

Question

我从 W3S 尝试了下面的代码，他们说蓝色矩形是源，红色是目标，我需要知道他们是如何确定的，是订单还是其他？

  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

使用合成时...

'destination'总是指画布上的现有像素。

'source'总是指被添加到画布上的新像素。

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