ctx.fillText() 在画布上绘制“被填充的”文本 ctx.strokeText() 在画布上绘制文本(无填充) ctx.measureText() 返回包含指定文本宽度的对象
1 ctx.font(); 设置或返回文本内容的当前字体属性
2 ctx.textAlign = 'start|end|center|left|right'
textAlign 设置或返回文本内容的当前对齐方式 start : 默认。文本在指定的位置开始。 end : 文本在指定的位置结束。 center: 文本的中心被放置在指定的位置。 left : 文本左对齐。 right : 文本右对齐。
3 ctx.textBaseline = 'alphabetic|top|hanging|middle|ideographic|bottom'
alphabetic : (默认)文本基线是普通的字母基线。 top : 文本基线是 em 方框的顶端。 hanging : 文本基线是悬挂基线。 middle : 文本基线是 em 方框的正中。 ideographic: 文本基线是em基线。 bottom : 文本基线是 em 方框的底端。
4 文字阴影和模式范围
ctx.shadowColor ctx.shadowBlur(模糊级数) ctx.shadowOffsetX ctx.shadowOffsetY
eg:绘制文字 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "red"; ctx.font = "60px '微软雅黑'"; ctx.textAlign = "left"; //shadowBlur:模式级数 ctx.shadowBlur = 10; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowColor = "black"; //fillText("要添加的文字",x0坐标,y0坐标) ctx.strokeText("You jump! I jump!",50,100); ctx.fillText("You jump! I jump!",50,100); ctx.fillText("rose~jack",50,200);