使用globalCompositeOperation创建渐变蒙版

Question

我正在尝试使用画布的globalCompositeOperation='destination-in'设置来绘制一系列由径向渐变遮盖的点。我期望的结果显示在下面的屏幕截图中：

相反，我的画布显示的是实心渐变，没有任何点可见。这是我的JS：

var canvas = document.getElementById('canvas')
  , ctx = canvas.getContext('2d');

var coordMatrix = [
  [50, 100, 150, 50, 100, 150],
  [50,  50, 50, 100, 100, 100]
];

var gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 200);

ctx.globalCompositeOperation = 'destination-in';

coordMatrix[0].forEach(function(xCoord, i) {
  var yCoord = coordMatrix[1][i];
  ctx.moveTo(xCoord, yCoord);
  ctx.arc(xCoord, yCoord, 10, 0, Math.PI * 2, false);
});

这是一个小提琴：

https://jsfiddle.net/73d9jawn/2/

我错过了什么吗？

Answer 1

在设置弧的坐标后，您忘记调用ctx.fill()。此外，您需要在ctx.fill()完成所有迭代后调用forEach，否则globalCompositeOperation仅适用于绘制的第一个圆圈。 Here is an updated fiddle