绘制文本
canvas 提供了两种方法绘制文本：
fillText(text,x,y [,maxWidth])
在指定位置的（x,y）位置填充指定的文本，绘制的最大宽度是可选的。
strokeText(text,x,y, [,maxWidth])
在指定的位置绘制文本边框
一个填充文本的实例
function draw() {
let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.font = "20px Times New Roman"
ctx.fillText("Sample String", 5, 30);
}
}
填充文本
一个边框文本的实例
function draw() {
let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.font = "48px Times New Roman"
ctx.strokeText("Sample String", 5, 50);
}
}
边框文本
有样式的文本
font = value
设置文本的尺寸，默认字体是 10px sans-serif。
textAlign = value
文本对气项，可选的值包括： start end left right center 默认值为 start。
textBaseline value
基线对齐选项。可选的值包括：top hanging middle alphabetic ideographic bottom 默认值为 alphabetic
direction = value
文本方向，可用值： ltr rtl inherit 默认值是 inherit。
文本裁量
当需要更多文本细节时，可以使用 measureText() 返回含文本特性的对象。
function draw() {
let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.font = "48px serif"
ctx.textBseline = 'alphabetic'
ctx.strokeText("Sample String", 0, 100);
var text = ctx.measureText("Sample")
console.log(text.width) // 返回144
}
}
