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命令，因为您正在使用循环渐变填充矩形。

帆布 - 透明圆形渐变

1 个答案: