javascript - 如何将 HTML5 canvas 文本设置为粗体和/或斜体?

标签 javascript html canvas typography

我以非常直接的方式将文本打印到 Canvas 上:

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

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

最佳答案

来自MDN documentation on CanvasRenderingContext2D.font :

The CanvasRenderingContext2D.font property of the Canvas 2D API specifies the current text style to use when drawing text. This string uses the same syntax as the CSS font specifier.

因此,这意味着以下任何一项都有效:

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

这里有一些额外的资源以获取更多信息:

关于javascript - 如何将 HTML5 canvas 文本设置为粗体和/或斜体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5158222/

相关文章:

javascript - 根据滚动位置淡入淡出图像

javascript - Konva 中的平行线分隔符

html - 为什么可以使用GET方法来提交表单数据?

jquery - 如何使用 jquery 更改 webkit css

javascript - 从二维 Javascript 数组中删除一个项目

javascript - 在同一页面上处理表单执行 JQuery 函数

javascript - 无法在 Fabric Js 中按线路连接端点

internet-explorer - 在Microsoft IE和Edge中,删除包含iframe的iframe后,应用程序会继续播放声音

php - 从书面脚本外部调用 JavaScript 函数是否安全?

javascript - 合并嵌套的两个数组的对象