在 HTML5 画布中填充后的抗锯齿边缘？答案

【问题标题】：Anti-aliasing edges after floodfill in HTML5 canvas?在 HTML5 画布中填充后的抗锯齿边缘？
【发布时间】：2015-08-15 23:10:44
【问题描述】：

我正在尝试实现一种在 HTML5 画布中产生抗锯齿边缘的填充算法。

我的初始输入是一个ImageData 对象，其中包含透明背景上重叠的圆圈和线条的轮廓。轮廓已经抗锯齿，并且我有边缘的实际颜色（rgba(51, 51, 51, 255)），以及通过对形状进行抗锯齿产生的一些灰度“边缘”像素（使用rgba(48, 48, 48, 32) 和rgba(54, 54, 54, 200) 之类的值）。

我当前的洪水填充实现知道这些边缘像素，但它只是将填充颜色应用于它们 - 导致像素化。我还尝试应用 this answer 的 alpha 混合，也导致像素化。

您会推荐什么算法通过混合这些边缘像素的颜色和填充颜色来生成平滑边缘？

【问题讨论】：

附带问题：对于抗锯齿，是否足以改变 alpha ？您可以构建泛光填充的抗锯齿版本（边框具有相同的 rgb，但 alpha 与像素内填充的空间成比例），然后将其添加到圆/线的绘图中。

标签： javascript algorithm html5-canvas antialiasing flood-fill

【解决方案1】：

我认为您需要在（纯色）泛光填充颜色“顶部”混合边缘像素。像这样的东西（伪代码）：

alpha = pixel.alpha / 255;
pixel.r = alpha * pixel.r + (1 - alpha) * fill.r;
pixel.g = alpha * pixel.g + (1 - alpha) * fill.g;
pixel.b = alpha * pixel.b + (1 - alpha) * fill.b;

换句话说，如果边缘像素是不透明的 (alpha == 1)，它只会保留其颜色。如果它是完全透明的 (alpha == 0)，它会接收洪水填充颜色。在这两个极端之间，根据 alpha 进行线性插值。

【讨论】：

谢谢你，Thomas，这确实是正确的方法。