用于大字体大小的HTML5画布文本笔划未正确绘制

Question

我想在HTML5画布上写一个带有红色边框颜色（描边颜色）和绿色填充颜色的大文字。

我将笔划宽度设为5px 。

我将font size设置为小于260px 时很好。

这是我的第一个代码http://jsfiddle.net/8Zd7G/：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="240px Calibri";
ctx.strokeStyle = "F00"; //Red
ctx.fillStyle = "0F0"; //Green
ctx.lineWidth = 5;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

但是，当我将font size设置为大于或等于260像素时，文本边框/笔划未正确着色。它的红色边框没有红色填充。

这是我的第二个代码http://jsfiddle.net/Pdr7q/：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="260px Calibri";
ctx.strokeStyle = "F00";
ctx.fillStyle = "0F0";
ctx.lineWidth = 5;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

我的问题是如何使用较大的字体大小（如第一张图片而不是第二张图片）来获取正确的文本字符串填充？ 在此先感谢：）

Answer 1

这是有效的

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = '120pt Calibri';
ctx.strokeStyle = "#F00";
ctx.fillStyle = "#0F0";
ctx.lineWidth = 3;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

工作演示 ---＆gt; jsFiddle

Answer 2

这是Chrome的一个已知问题，其中字体大小超过256像素（包括缩放）：
https://code.google.com/p/chromium/issues/detail?id=280221

目前似乎没有针对该问题的解决方案，但请按照主题（上面的链接）查看以后的状态（上次更新25月10日）。

您可以通过减少行宽来减少问题，尽管问题仍然存在。

另一种选择是将一半大小（大小<256）绘制到临时画布中，然后将此画布绘制为缩放到所需大小的主画布。它会使文本更模糊，但它看起来会比我认为的卷曲版本更好。

Firefox有一个相关的错误（大尺寸错位）：
https://bugzilla.mozilla.org/show_bug.cgi?id=909873

Answer 3

我认为问题可能与您使用的font-family有关：“Calibri”

我在Chrome上使用ubuntu（Chrome 27）并且我没有在这里使用calibri，但我已经使用Arial进行了测试，这样做效果很好（注意字体大小为360px，甚至比你的大）：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = '360px Arial';
ctx.strokeStyle = "#F00";
ctx.fillStyle = "#0F0";
ctx.lineWidth = 5;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

演示：

JSFiddle