第2章 其他绘制API
第1节 文字绘制API
-
指定位置
//在指定位置和宽度内绘制文字 context.fillText(text,x,y,maxWidth); //最大宽度 -
设置字体名称和样式
//设置字体名称和形状 context.font='字体属性' //bold 32px sans-serif -
设置字体对齐位置
//设置文本内容水平对齐方式 context.textAlign='水平方位值' //center|left|right //设置文本内容垂直对齐方式 context.textBaseline='垂直方位值' //top|middle|bottom -
绘制内容另存为图片
//当前绘制内容存为图片 context.toDataURL(type, encoderOptions);//image/png图片格式,0到1区间图片质量
文字的绘制——使用
-
fillText(text,x,y,[max]);——填充字体-实心
strokeText(text,x,y,[max]);——描边字体-空心 -
font=‘字体样式的设置’
-
textAlign=‘left center right’
texBaseline=‘top middle bottom’ -
toDataURL(‘image/png’,1)
实例1-绘制文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="cvs" style="border: solid 1px #ccc"></canvas>
<script type="text/javascript">
//获取画布元素
var cvs=document.getElementById("cvs");
//获取工具集
var cxt=cvs.getContext("2d");
//设置文字的样式
cxt.font='bold 20px 黑体';
//调用工具集中的API绘制文字
cxt.fillText('画布',30,30);
cxt.strokeText('画布',50,50);
</script>
</body>
</html>
效果
实例2-绘制带方位的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="cvs" style="border: solid 1px #ccc"></canvas>
<script type="text/javascript">
//获取画布元素
var cvs=document.getElementById("cvs");
//获取工具集
var cxt=cvs.getContext("2d");
//设置文字的样式
cxt.font='bold 20px 黑体';
cxt.strokeStyle='red';
cxt.moveTo(10,30);
cxt.lineTo(120,30);
cxt.stroke();
cxt.beginPath();
cxt.moveTo(30,10);
cxt.lineTo(30,120);
cxt.stroke();
//水平方向居中对齐
cxt.textAlign='center';
//垂直方向居中对齐
cxt.textBaseline='middle';
//调用工具集中的API绘制文字
cxt.fillText('画布',30,30);
//将绘制内容另存为图片
var imgUrl=cvs.toDataURL('image/png',1);
//输出到控制台
console.log(imgUrl);
</script>
</body>
</html>
效果