如何将 HTML5 画布文本设置为粗体和/或斜体?

Posted

技术标签:

【中文标题】如何将 HTML5 画布文本设置为粗体和/或斜体?【英文标题】:How do I style HTML5 canvas text to be bold and/or italic? 【发布时间】:2011-07-06 16:55:40 【问题描述】:

我正在以一种非常直接的方式将文本打印到画布上:

var ctx = canvas.getContext('2d');
ctx.font = "10pt Courier";
ctx.fillText("Hello World", 100, 100);

但是如何将文本更改为粗体、斜体或两者兼而有之?有什么建议可以解决这个简单的例子吗?

【问题讨论】:

【参考方案1】:

您可以使用以下任何一种:

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

ctx.font = "italic bold 10pt Courier";

如需更多信息,请参阅以下资源:

Dive into html5 How to display text in canvas HTML5 canvas - the basics

【讨论】:

Arg 打败了我,+1 了解更多信息的好网站,diveintohtml5.org/canvas.html#divingin @Loktar 感谢您的链接,将其包含在答案中。 关于下划线:***.com/questions/4627133/… 也可以指定字体粗细:ctx.font = "400 10pt Courier" 在最新浏览器版本中使用 Calibri 或 Open Sans 的 Chrome 中,ctx.font = "400 10pt Open Sans" 的字体粗细对我不起作用【参考方案2】:

对于偶然发现此问题的任何人,请注意:请务必按照已接受答案中显示的顺序进行操作。

当我的顺序错误时,我遇到了一些跨浏览器问题。 “10px Verdana bold”在 Chrome 中有效,但在 IE 或 Firefox 中无效。如图所示将其切换为“粗体 10px Verdana”可以解决这些问题。如果遇到类似问题,请仔细检查订单。

【讨论】:

Chrome 似乎发生了变化,使其与 Firefox 保持一致。看到这支笔:codepen.io/anon/pen/BXNZxO【参考方案3】:

下划线不能通过任何画布方法或属性。但我做了一些工作来完成它。你可以去看看@http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround

你可以在这里找到实现http://jsfiddle.net/durgesh0000/KabZG/

【讨论】:

【参考方案4】:

所以没有办法只在一个 JS 命令中设置font-weight(或font-sizefont-family...)?这一切都必须在一个完整的字体字符串中?

【讨论】:

【参考方案5】:

如果您需要允许格式变化,您可以设置字体样式,绘制文本,使用measureText 测量它,设置新样式,然后像这样绘制下一个块:

// get canvas / context
var can = document.getElementById('my-canvas');
var ctx = can.getContext('2d')

// draw first text
var text = '99%';
ctx.font = 'bold 12pt Courier';
ctx.fillText(text, 50, 50);

// measure text
var textWidth = ctx.measureText(text).width;

// draw second text
ctx.font = 'normal 12pt Courier';
ctx.fillText(' invisible', 50 + textWidth, 50);
<canvas id="my-canvas" width="250" height="150"></canvas>

进一步阅读

MDN > Canvas > Drawing text formatting individual words with italics

【讨论】:

以上是关于如何将 HTML5 画布文本设置为粗体和/或斜体?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Android TextView 中将字体样式设置为粗体、斜体和下划线?

textview可以设置字体的粗体 斜体吗

iPhone/iPad的UILabel如何设置粗体和斜体?

将部分数据工具提示文本设置为粗体

如何在运行时将文本框的文本设置为粗体?

将 UILabel 文本设置为粗体 [重复]