了解 canvas HTML5 中源和目标之间的区别

Posted 2023-03-23

【中文标题】了解 canvas HTML5 中源和目标之间的区别

【英文标题】：know the different between source and destention in canvas HTML5

【发布时间】：2016-06-22 04:31:20

【问题描述】：

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

【问题讨论】：

你画的东西就是你画的时候的来源。你画的是目的地。如果您稍后在源上绘制，源将成为目标，并且目标甚至可以成为源;-)

【参考方案1】：

使用合成时...

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

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

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