javascript - 解决 Lion 上 Safari 5.1 Canvas 上字体透明度问题的方法？

Question

有一个问题，在某些机器上， Canvas 元素中的文本将无法在 Lion 的 Safari 5.1 上完全呈现。我的意思是字母看起来好像没有透明背景。这只发生在某些机器上，有时刷新后文本会被清除。我只是在使用 fillText，它应该只是呈现 Arial。

有人遇到同样的问题并且能够想出解决方法吗？我尝试通过 3D 变换(旋转等)触发重绘，但没有成功。

这是正确渲染方式和有时糟糕的 safari 渲染方式的屏幕截图(对质量表示抱歉，这是我收到的，但您应该明白):

Answer 1

这是配备 ATI GPU 的 Mac 上的硬件加速问题。

我们运行相同的代码，在 Canvas 上绘图:我们在配备 ATI 显卡的 Mac 上遇到了问题；相反，在 MacMini(配备英特尔 GPU)上，绘图非常完美。

如果您在 Safari 菜单中的“调试”->“绘图/合成标志”下选中“禁用 Canvas 加速绘图”，您将不会注意到文本周围不再出现透明度错误。

Safari 6.0(在 Mac OS X 10.7.4 上)显示相同的透明度问题。

-- 更新--
经过多方排查，可以说这不是GPU的问题，而是苹果的问题:“字体平滑”在LCD显示器上的应用(AppleFontSmoothing设置)。

在我们的观察中，我们在两台机器上进行测试:
1 - 配备飞利浦 LCD 的 Mac Mini
2 - iMac(自带 LCD 显示器)

第一台机器没有显示问题，因为系统算法没有将显示器识别为液晶显示器。
但是使用命令 defaults -currentHost write -g AppleFontSmoothing -int 2 强制 AppleFontSmoothing，这个问题甚至在 Mac Mini 上也会爆发。

如果您不希望您的应用程序再显示该问题(维护 Canvas 硬件加速)，您可以在 Canvas 对象上设置“webkitFontSmoothing”属性:

var canvas = document.getElementById('my-canvas');
canvas.style.webkitFontSmoothing = "antialiased"