摆脱生成的渐变纹理上的文物

Question

我通过在我拥有的白色图像中添加渐变部分来生成衰减纹理。如果实现是相关的，我将使用HTML5 canvas进行实现。由于某些原因，我得到了奇怪的光线，而它们应该是渐变平滑的神器。我无法在实现级别上找到任何方法来处理它，所以我必须在生成之后摆脱它们。问题是，如果每个像素都能访问图像，我如何识别这些白色像素并用像素替换以保持渐变平滑？

Answer 1

光线是由重叠和舍入误差引起的。它们可以通过使用高斯模糊滤波器（实际上充当低通滤波器）来移除或至少减少。

为了避免新的问题，例如内部形状的黑色像素泄漏到渐变中，我建议采取以下步骤：

1. 使用与渐变的起始颜色相同的颜色填充内部形状。
2. 制作渐变
3. 使用filter property of context（f.ex context.filter = "blur(7px)";，通过将其设置为none重置）或使用手动实现来应用高斯模糊
4. 以目标颜色重绘内部形状。

现在，尝试使用模糊半径来找到最佳值非常简单。请注意，模糊将添加到渐变中，因此您可能希望链接两者，以便在增加模糊半径时减小渐变的半径。

Pro-tip ：您也可以将渐变效果全部放在一起，只需使用高斯模糊效果制作发光效果（如下例所示）。

＆＃13;
＆＃13;
var ctx = c.getContext("2d");
ctx.moveTo(300, 50);
ctx.quadraticCurveTo(325, 300, 550, 550);
ctx.quadraticCurveTo(300, 500, 50, 550);
ctx.quadraticCurveTo(250, 300, 300, 50);
ctx.closePath();

// blur next drawings
ctx.filter = "blur(20px)"; // glow radius

// produce a full base using fill and heavy stroke
ctx.fillStyle = ctx.strokeStyle = "#fff";
ctx.fill();
ctx.lineWidth = 40;        // thicker = stronger spread
ctx.stroke();

// final, fill center in destination color
ctx.filter = "none";
ctx.fillStyle = "#000";
ctx.fill();
＆＃13;
#c {background:#000}
＆＃13;
<canvas id=c width=600 height=600></canvas>
＆＃13;
＆＃13;
＆＃13;