font: 字型、字号和字体
Default: "20px sans-serif"
context.font = “
font-style font-variant font-weight font-size font-family
”
font-style:
-
normal (Default)
-
italic (斜体字)
-
oblique (倾斜字体)
var canvas = document.getElementById('xxx') canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillStyle = "#058" context.font = "bold 40px sans-serif" context.fillText("Hello world 你好世界！", 40, 100) context.font = "italic 40px sans-serif" context.fillText("Hello world 你好世界！", 40, 200) context.font = "oblique 40px sans-serif" context.fillText("Hello world 你好世界！", 40, 300)
font-variant: (变体)
-
normal (Default)
-
small-caps (英文小型大写字母)
var context = canvas.getContext("2d"); context.fillStyle = "#058" context.font = "bold 40px sans-serif" context.fillText("Hello world 你好世界！", 40, 100) context.font = "small-caps bold 40px sans-serif" context.fillText("Hello world 你好世界！", 40, 200)
font-weight:
-
lighter (浏览器可能还未支持)
-
normal (Default)
-
bold
-
bolder (浏览器可能还未支持)
-
100, 200, 300, 400 (normal),
500, 600, 700 (bold),
800, 900
*W3C虽然定义了标准，但大多数浏览器还不支持9个等级，只有400和700这两种效果！
var context = canvas.getContext("2d"); context.fillStyle = "#058" context.font = "lighter 40px impact" context.fillText("Hello world 你好世界！", 40, 100) context.font = "normal 40px impact" context.fillText("Hello world 你好世界！", 40, 200) context.font = "bold 40px impact" context.fillText("Hello world 你好世界！", 40, 300) context.font = "bolder 40px impact" context.fillText("Hello world 你好世界！", 40, 400)
font-size:
-
20px (Default)
-
2em
-
150%
-
xx-samll, x-small,
medium,
large,
x-large, xx-large
var context = canvas.getContext("2d"); context.fillStyle = "#058" context.font = "xx-small sans-serif" context.fillText("Hello world 你好世界！", 40, 100) context.font = "medium sans-serif" context.fillText("Hello world 你好世界！", 40, 200) context.font = "xx-large sans-serif" context.fillText("Hello world 你好世界！", 40, 300)
font-family:
-
可以设置多种备选字体 (如果所有字体都不可以，将使用浏览器默认的字体)
-
支持@font-face (CSS3向浏览器中注入新字体)
-
Web安全字体 （使用这些字体可以保证大部分浏览器都支持，具体可搜索）
var context = canvas.getContext("2d"); context.fillStyle = "#058" context.font = "xx-small sans-serif" context.fillText("Hello world 你好世界！", 40, 100) context.font = "medium sans-serif" context.fillText("Hello world 你好世界！", 40, 200) context.font = "xx-large sans-serif" context.fillText("Hello world 你好世界！", 40, 300)
文本对齐
水平对齐
context.textAlign =
-
left
-
center
-
right
*从给定点的哪个位置开始绘制
var context = canvas.getContext("2d"); context.fillStyle = "#058" context.font = "bold 40px sans-serif" context.textAlign = "left" context.fillText("Hello world 你好世界！", 40, 100) context.textAlign = "center" context.fillText("Hello world 你好世界！", 40, 200) context.textAlign = "right" context.fillText("Hello world 你好世界！", 40, 300) // baseline context.strokeStyle = "#888" context.moveTo(400, 0); context.lineTo(400, 800); context.stroke();
垂直对齐
context.textBaseline =
-
top
-
middle
-
bottom
-
alphabetic (Default) 拉丁语垂直方向基准线
-
ideographic 汉语垂直方向基准线
-
hanging 印度语垂直方向基准线
*从给定点的哪个位置开始绘制
var context = canvas.getContext("2d"); context.fillStyle = "#058" context.font = "bold 40px sans-serif" context.textBaseline = "top" context.fillText("Hello world 你好世界！", 40, 100) drawBaseline(context, 100) context.textBaseline = "middle" context.fillText("Hello world 你好世界！", 40, 200) drawBaseline(context, 200) context.textBaseline = "bottom" context.fillText("Hello world 你好世界！", 40, 300) drawBaseline(context, 300) // baseline function drawBaseline(cxt, h) { var width = cxt.canvas.width; cxt.save(); cxt.strokeStyle = "#888" cxt.lineWidth = 2; cxt.moveTo(0, h); cxt.lineTo(width, h); cxt.stroke(); cxt.restore(); }
文本的度量
计算字符串渲染的宽度
context.measureText( string ).width
var context = canvas.getContext("2d");
context.fillStyle = "#058"
context.font = "bold 40px sans-serif"
context.fillText("Hello world 你好世界！", 40, 100)
var textWidth = context.measureText("Hello world 你好世界！").width;
context.fillText("以上字符串宽度为" + textWidth + "px", 40, 200)