正文
-_-#【Canvas】绘制文本
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!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>
