11

我想用红色边框颜色（描边颜色）和绿色填充颜色在 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 px时，文本边框/笔划的颜色不正确。它只是有一个没有被红色填充的红色边框。

这是我的第二个代码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);

在此处输入图像描述

我的问题是如何使用大字体（如第一张图片而不是第二张图片）获得正确的文本笔触填充？提前致谢 ：）

4

3 回答 3

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);

工作演示--->jsFiddle

于 2013-12-05T06:21:19.100 回答
1

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

目前似乎没有解决该问题的方法，但请按照线程（上面的链接）稍后查看状态（最后一次更新是 10 月 25 日）。

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

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

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

于 2013-12-05T12:06:47.547 回答
0

我认为问题可能与您使用的字体系列有关：“Calibri”

我在带有 ubuntu（Chrome 27）的 Chrome 上，我这里没有 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

于 2013-12-05T11:26:56.733 回答