javascript - 使用 globalCompositeOperation 创建渐变 mask

Question

我正在尝试使用 Canvas 的 globalCompositeOperation='destination-in' 设置来绘制一系列被径向渐变掩盖的点。我想要的结果显示在下面的屏幕截图中:

相反，我的 Canvas 显示的是纯色渐变，没有任何点可见。这是我的 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);
});

这是一个 fiddle :

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

我错过了什么吗？

Answer 1

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