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

时间:2013-08-25 15:17:16

标签: javascript html5 html5-canvas

我想在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);

enter image description here

但是,当我将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);

enter image description here

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

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

这是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

答案 2 :(得分:0)

我认为问题可能与您使用的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