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

Question

文本看起来像素化/别名（firefox和opera）

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

谢谢

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 的，但包含在内是为了很好的衡量标准。