canvas绘制文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas {
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="cvs" width="500" height="500"></canvas>
<script>
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
/*
* 设置文字的属性
* ctx.font = 和css语法一样。
* 注意：这里设置字体大小时必须带单位，单位支持css的所有表示方式。
* 注意：单独设置字体大小不会生效，必须要加一个额外属性样式。
* */
ctx.font = '2rem 微软雅黑';
/*
* 绘制描边文字：
* ctx.strokeText( 文字, 参考x轴坐标，参考y轴坐标，限制文字的最大长度(可选) )
* */
ctx.strokeText( '嘻嘻嘻嘻嘻嘻', 100, 100 );
/*
* 绘制填充文字：
* ctx.fillText( 文字, 参考x轴坐标，参考y轴坐标，限制文字的最大长度(可选) )
* */
ctx.fillText( '咯咯咯咯咯咯', 100, 200 );
// 绘制文字的参考点
ctx.beginPath();
ctx.arc( 100, 100, 4, 0, Math.PI * 2 );
ctx.fill();
ctx.beginPath();
ctx.arc( 100, 200, 4, 0, Math.PI * 2 );
ctx.fill();
</script>
</body>
</html>
对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas {
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="cvs" width="500" height="500"></canvas>
<script>
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
ctx.font = '2rem 微软雅黑';
/*
* 设置文字的水平对其方式：
* ctx.textAlign = 'left || start' 、 'right || end' 、 'center'
* 默认值为start。
* */
/*
* 设置文字的垂直对其方式：
* ctx.textBaseline = 'top' 、'bottom'、'middle'、'alphabetic'、'hanging'、'ideographic'
* 默认值为alphabetic。
* */
ctx.textAlign = 'left';
ctx.textBaseline = 'ideographic';
ctx.fillText( '咯咯咯咯咯咯', 100, 200 );
// 绘制文字的参考点
ctx.beginPath();
ctx.arc( 100, 200, 4, 0, Math.PI * 2 );
ctx.fill();
</script>
</body>
</html>
