帆布 - 清晰的圆形渐变

Question

我有一个位于某些内容上方的画布，并且完全用黑色填充，以允许用户显示画布下方的内容。我想在预定位置清除一个圆圈，但我希望圆圈淡入填充颜色。 I've found how to clear circles，但我找不到任何可以让我清除一个淡入背景颜色的圆圈的东西。

---

当前代码 - 清除一个圆圈，但不会变黑

    context.fillStyle = "black";
    context.fillRect(0, 0, this.width, this.height);

    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.clip();
    context.clearRect(x - radius - 1, y - radius - 1, radius * 2 + 2, radius * 2 + 2);

---

代码尝试 - 不起作用

    var radGrd = context.createRadialGradient(x, y, r1, x, y, r2);
    radGrd.addColorStop(0, "rgba( 0, 0, 0,  0 )");
    radGrd.addColorStop(1, "rgba( 0, 0, 0,  1 )");

    //Doesn't Work; Nothing Draws On Screen
    context.fillStyle = radGrd;
    context.clip();
    context.clearRect(x - r2, y - r2, r2 * 2, r2 * 2);

---

问：清除背景颜色逐渐消失的圆圈的正确方法是什么？

---

Answer 1

您几乎拥有它：在clearRect 之后，添加具有相同参数的fillRect 命令。您应该删除 arc 或 clip 命令，因为您正在用圆形渐变填充 矩形。