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 | 使用用于窗口状态栏中的字体。 |