javascript - Firefox 上渲染不佳/抗锯齿的 Canvas 文本

Question

文本看起来像素化/锯齿(firefox 和 opera)

由于实际问题似乎没有太多可做的，是否有任何怪癖/技巧可以减少这种影响？

谢谢 /A

context.textBaseline = 'top'
context.fillStyle = color
context.font = "16px gotham_htfregular"
context.fillText("HD", 15, 11)

Answer 1

我不确定这是否有帮助，但它帮助我在 Canvas 内的图像上消除锯齿边缘:

                canvas {
                  image-rendering: optimizeSpeed;
                  image-rendering: -moz-crisp-edges;
                  image-rendering: -webkit-optimize-contrast;
                  image-rendering: optimize-contrast;
                  -ms-interpolation-mode: nearest-neighbor;
}

注意:-ms-interpolation-mode 适用于 IE，但包含在内是为了更好的衡量。