使用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只适用于绘制的第一个圆圈。这是一个更新的小提琴。