如何在 Firefox 中启用 HTML5 画布文本？答案

【问题标题】：How to enable HTML5 canvas text in Firefox?如何在 Firefox 中启用 HTML5 画布文本？
【发布时间】：2015-09-10 06:00:27
【问题描述】：

我可以在 Firefox 配置文件 A 中看到画布（线条、绘图等），但看不到画布文本。

我在 Windows 7 上使用 Firefox 38.0.5 EME-free。我没有对 Firefox 文件夹做任何事情。我可以在我的其他个人资料 B 上看到画布文本。

这是我希望能够看到的示例：HTML canvas fillText() Method。

配置文件 A：画布显示为白色矩形。
配置文件 B：我看到“Hello World！Big Smile”。

我尝试about:config 并搜索“画布”，但我的两个个人资料中的条目相同。

在Detecting HTML5 Features - Canvas Text 中，它说：

您的浏览器支持画布文本 API

如果我加载 w3schools 网站，我会在浏览器控制台中获得这些日志：

NS_ERROR_FAILURE：组件返回失败代码：0x80004005 (NS_ERROR_FAILURE) [nsITaskbarTabPreview.invalidate] WindowsPreviewPerTab.jsm:406:0

未声明 HTML 文档的字符编码。如果文档包含 US-ASCII 范围之外的字符，则文档将在某些浏览器配置中呈现乱码。页面的字符编码必须在文档或传输协议中声明。 tryit.asp

POST ...w3schoolslink...tags/tryit_view.asp [HTTP/1.1 200 OK 210ms]

未声明带框文档的字符编码。如果在没有文档框架的情况下查看文档，文档可能看起来不同。 tryit_view.asp

如果我在同一个 w3schools 页面上单击“查看结果”，最后两个。

不要告诉我重置 Firefox。我花了数年时间按照自己想要的方式定制它。

【问题讨论】：

“不要告诉我重置 Firefox” – 然后至少在禁用所有扩展的情况下启动它（命令行选项，去查一下），然后看看如果这改变了事情。

标签： javascript html firefox canvas

【解决方案1】：

是否有可能您在两个配置文件中都没有使用过的字体？

在我试图显示不属于所用字体的“字母”的情况下，我将这些矩形视为文本。例如，我尝试显示以 unicode 定义的音乐符号，但我所知道的大多数字体都不支持它们。

【讨论】：

感谢您的回复。有可能，我从浏览器控制台附加了似乎与编码有关的日志。
你想画哪些角色？
ctx.font = "20px 格鲁吉亚"; ctx.fillText("Hello World!", 10, 50); w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_filltext
据我所知，在正常情况下没有可能出现问题的特殊字符。抱歉，在这种情况下，我会看看您对浏览器的自定义...也许有问题。

【解决方案2】：

序言

Firefox 41.0.1 中似乎不存在此问题。

修复1 - TL;DR

将gfx.direct2d.disabled 设置为false。

Fix2 - 替代方案

当gfx.direct2d.disabled 是true
将gfx.canvas.azure.backends 设置为cairo

使用 Fix1 会在网页和 view-source（至少对我而言）中产生不良字体的副作用，而这可用于在仍呈现画布文本的同时保持 direct2d 禁用。

在偶然发现这个之后我测试了：
Bug 842521 - PDF.js won't render text when DirectWrite is enabled with both Skia and Cairo backends

Fix1 的长答案

虽然这不是一个真正的编程问题，但希望它被迁移而不是被删除，我有一个可能的解决方案。

我遇到了同样的问题，我的常规 Firefox 配置文件不会显示画布文本，而新的配置文件没有问题。使用安全模式也无效。

通过about:config 中的首选项，我最终将gfx.direct2d.disabled 切换为false，然后在重新启动浏览器后可以使用画布中的文本。

gfx.direct2d.disabled 设置为true 的可能原因是通过取消选中Options > Advanced 中的Use hardware acceleration when available 来禁用硬件加速。

请注意，Firefox 不会考虑单独切换该首选项以重新启用硬件加速，因为这只发生在更改首选项 layers.acceleration.disabled 时，这显然对这个问题没有影响。

【讨论】：