canvas标签font设置当前文本字体属性,可字体样式、字体大小等。该属性有默认值可不设置。
设置字体画布

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置画布字体-HTML教程www.xuandaima.com</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font = "46px serif";
ctx.strokeText("炫代码", 50, 50);
</script>
</body>
</html>| document.getElementById("myCanvas2") | 返回文档id属性为"myCanvas2"的对象 |
| getContext("2d") | getContext() 返回画布上绘图的环境。getContext("2d") 返回绘制类型(2 维)的环境,未来可能会支持3维,但现在支持2维。 |
font = "46px serif"; | 设置字体大小为46像素,字体为“serif”。 |
| strokeText("炫代码", 50, 50); | 绘制字体文字和字体位置,X轴为“50”Y轴为“50”。 |
![]() | font 属性使用的语法与 CSS font 属性 相同。font需要配合strokeText()或fillText()方法使用,方可填充或绘制出字体,单纯设置字体颜色是没有效果的。 |
注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。





font的默认值为“10px sans-serif”
context.font="属性值,多个属性值以空格隔开";
| 值 | 描述 |
|---|---|
| font-style | 规定字体样式。可能的值:
|
| font-variant | 规定字体变体。可能的值:
|
| font-weight | 规定字体的粗细。可能的值:
|
| font-size / line-height | 规定字号和行高,以像素计。 |
| font-family | 规定字体系列。 |
| caption | 使用标题控件的字体(比如按钮、下拉列表等)。 |
| icon | 使用用于标记图标的字体。 |
| menu | 使用用于菜单中的字体(下拉列表和菜单列表)。 |
| message-box | 使用用于对话框中的字体。 |
| small-caption | 使用用于标记小型控件的字体。 |
| status-bar | 使用用于窗口状态栏中的字体。 |