1.绘制文字api
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title> 绘制一个三角形</title>
<canvas style="border: solid 2px red; " id="one">
</canvas>
<script>
var cas = document.querySelector('#one');
// 获取工具
var cxt = cas.getContext('2d');
//调取文字工具
//在指定位置和宽度内绘制文字 --填充绘制
// context.fillText(text,x,y,maxWidth); //最大宽度
cxt.fillText('画布',30,30,22);
//设置字体名称和形状
// context.font='字体属性' //bold 32px sans-serif
cxt.font ='bold 32px sans-serif';
// cxt 画笔描边
cxt.strokeText('画布',50,50,22);
</script>
</head>
<body>
</body>
</html>
2.绘制文字带方位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title> 绘制一个三角形</title>
<canvas style="border: solid 2px red; " id="one">
</canvas>
<script>
var cas = document.querySelector('#one');
// 获取工具
var cxt = cas.getContext('2d');
// 设置一个x线
cxt.moveTo(10,30);
cxt.lineTo(100,30);
cxt.stroke();
// 设置一个y线
cxt.beginPath();
cxt.moveTo(30,30);
cxt.lineTo(30,-130);
cxt.stroke();
//调取文字工具
//在指定位置和宽度内绘制文字 --填充绘制
// context.fillText(text,x,y,maxWidth); //最大宽度
cxt.fillText('画布',30,30);
// 水平对齐
cxt.textAlign = 'center';
// context.textBaseline='垂直方位值' //top|middle|bottom
cxt.textBaseline = 'middle';
//当前绘制内容存为图片
context.toDataURL(type, encoderOptions);//image/png图片格式,0到1区间图片质量
</script>
</head>
<body>
</body>
</html>
