用于HTML5画布的javascript手动抗锯齿算法

我想在画布上的一些文本上手动消除锯齿。我知道如何迭代图像/颜色数据，但不知道如何反别名

从谷歌搜索到消除混叠，我需要一个原始图像作为样本，然后传递颜色数据，然后对每个像素取周围像素的平均值，然后将这个新值复制到消除混叠图像的数据中

我不确定的是如何对周围的像素进行“平均”

我已经做了一个测试。正如您将看到的，我正在从原始画布复制图像数据，将其设置为负片，然后将其放入第二个画布

如果我要更具体地说明我正在努力解决的问题，那就是如何准确地确定只有一个迭代器的循环中的周围像素是什么？另外，平均值是否只是将最近的像素颜色VAL与当前像素VAL相加，然后除以像素数的一种情况

这是我希望操作数据的循环：

var imgData = originalContext.getImageData(0, 0, width, height);
var aliasedData = originalContext.createImageData(width, height);
aliasedData.data.set(imgData.data);

for (var i = 0; i < imgData.data.length; i += 4) {
    // just make the data negative to show something is happening
    aliasedData.data[i] = 255 - imgData.data[i];
    aliasedData.data[i + 1] = 255 - imgData.data[i + 1];
    aliasedData.data[i + 2] = 255 - imgData.data[i + 2];

    // need to get an average of surrounding pixels here
}
aliasedContext.putImageData(aliasedData, 0, 0);

var imgData=originalContext.getImageData（0，0，宽度，高度）；
var aliasedData=originalContext.createImageData（宽度、高度）；
aliasedData.data.set（imgData.data）；
对于（变量i=0；i

你能描述一下你想要的反走样与画布上的自动反走样有什么不同吗？画布上的文本反走样非常糟糕，尤其是在webkit浏览器中使用@font face&woff font时。我做的小提琴可能不是最好的例子，因为它使用的是泰晤士报，看起来并不那么糟糕。我将更新我的提琴，用锯齿状边缘的自定义字体显示它。我已经更新了提琴，你会看到，使用自定义字体和较小的字体，抗锯齿效果非常差