<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id="drawing" width="200" height="200" style="background:gray;">A drawing of something</canvas> <script> var drawing = document.getElementById('drawing') if (drawing.getContext) { var context = drawing.getContext('2d') context.font = 'bold 14px arial' context.textAlign = 'center' context.textBaseline = 'middle' context.fillText('12', 100, 20) // 如果将 textAlign 设置为"start",则 x 坐标表示的是文本左端的位置 context.textAlign = 'start' context.fillStyle = 'rgba(0,0,255,0.5)' context.fillText('12', 100, 40) // 则 x 坐标表示的是文本右端的位置 context.textAlign = 'end' context.fillStyle = 'rgba(255,0,0,0.5)' context.fillText('12', 100, 60) context.textAlign = 'start' var fontSize = 100 context.font = fontSize + 'px arial' // 返回一个 TextMetrics 对象。返回的对象目前只有一个 width 属性,但将来还会增加更多度量属性 while (context.measureText('Hello world!').width > 140) { fontSize-- context.font = fontSize + 'px arial' } context.fillText('Hello world!', 10, 10) } </script> </body> </html>