1.绘制描边文本
- 说明:描边的属性是共用的,无论是绘制直线还是文字,所以有需要的话要单独设置描边颜色,相关语法如下
语法 |
说明 |
ctx.strokeStyle |
设置描边的颜色(文本颜色) |
ctx.font |
设置文本,语法与 CSS font 属性相同,详见 |
ctx.strokeText(str,x0,y0) |
传入参数,进行文本绘制 |
<script>
var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d")
//绘制中心线
ctx.moveTo(0,canvas.height/2)
ctx.lineTo(canvas.width,canvas.height/2)
//绘制虚线
ctx.setLineDash([5,10])
//描边
ctx.stroke()
//开启路径
ctx.beginPath()
ctx.moveTo(canvas.width/2,0)
ctx.lineTo(canvas.width/2,canvas.height)
//绘制虚线
ctx.setLineDash([5,10])
//描边
ctx.stroke()
//以正中央为基点绘制文本)
//文本颜色就是描边的颜色
ctx.strokeStyle = "red"
//设置字体大小和字体类型
ctx.font = "40px 微软雅黑"
//取消虚线绘制
ctx.setLineDash([1,0])
//绘制文本
ctx.strokeText("你好世界",canvas.width/2,canvas.height/2)
</script>
![](https://img2018.cnblogs.com/blog/1813302/201910/1813302-20191009225309859-1487531205.png)
2.修改文本对齐方式(水平方向)
- 说明:文本默认左对齐,可以通过ctx.textAlign设置文本的对齐方式,他有以下几个值:
可选值 |
说明 |
left |
默认,左对齐,原点位于文字的左下角 |
center |
居中对齐,原点位于文字的中下方 |
right |
右对齐,原点位于文字的右下角 |
<script>
//其余代码省略
//绘制左对齐文本(默认就是这个,不设置也是这效果)
ctx.textAlign ="left"
ctx.strokeText("默认左对齐",canvas.width/2,canvas.height/2)
//绘制居中对齐的文本
ctx.textAlign = "center"
ctx.strokeText("居中对齐",canvas.width/2,100)
//绘制右对齐的文本
ctx.textAlign = "right"
ctx.strokeText("右对齐",canvas.width/2,200)
</script>
![](https://img2018.cnblogs.com/blog/1813302/201910/1813302-20191009231513632-1289682711.png)
3.修改文本基线
- 说明:通俗的说,就是文本垂直方向的对其方式,通过ctx.textBaseline可以修改文本的基线,方法与css的vertical-align类似,他有以下几个值:
可选值 |
说明 |
baseline |
默认,基线对其 |
middle |
垂直方向上居中对齐 |
top |
文本顶对齐 |
bottom |
文本底对齐 |
<script>
//以上代码省略
//绘制底部对齐文本
ctx.textBaseline ="bottom"
ctx.strokeText("底对齐",0,canvas.height/2)
//绘制垂直居中对齐的文本
ctx.textBaseline = "middle"
ctx.strokeText("垂直居中对齐",150,canvas.height/2)
//绘制顶对齐的文本
ctx.textBaseline = "top"
ctx.strokeText("顶对齐",350,canvas.height/2)
</script>
![](https://img2018.cnblogs.com/blog/1813302/201910/1813302-20191010102504574-963011607.png)
4.绘制填充文本(实心文字)
- 说明:填充的属性是共用的,无论是填充矩形还是文字,所以有需要的话要单独设置颜色,相关语法如下
语法 |
说明 |
ctx.fillStyle |
设置填充的颜色(文本颜色) |
ctx.font |
设置文本,语法与 CSS font 属性相同,详见 |
ctx.fillText(str,x,y,maxWidth) |
传入参数,进行文本绘制 |
<script>
//以上代码省略
//设置填充颜色
ctx.fillStyle = "green"
//设置文本大小和字体
ctx.font = "40px 微软雅黑"
//绘制填充文本
ctx.fillText("填充的文本",canvas.width/2,canvas.height/2)
//绘制填充文本(限制文本最大宽度)(宽度为画布的1/2)
ctx.fillText("这是有最大宽度限制的文本",0,200,canvas.width/2)
</script>
![](https://img2018.cnblogs.com/blog/1813302/201910/1813302-20191009233914997-214832990.png)
- 注意:参数maxWidth(文本的最大宽度)可选,如果文本的实际宽度大于这个限制,所有的文本会被压扁
5.获取文本的宽度
<script>
//以上代码省略
//绘制填充文本
var cName = "人类三大本质"
var name = "hello world"
//设置文本大小和字体
ctx.font = "40px 微软雅黑"
ctx.fillText(cName,50,50)
ctx.fillText(name,50,100)
//打印宽度
console.log(ctx.measureText(cName).width)
console.log(ctx.measureText(name).width)
//重新设置文本大小和字体
ctx.font = "20px 微软雅黑"
ctx.fillText(cName,50,150)
ctx.fillText(name,50,200)
//打印宽度
console.log(ctx.measureText(cName).width)
console.log(ctx.measureText(name).width)
</script>
![](https://img2018.cnblogs.com/blog/1813302/201910/1813302-20191009235955652-1118946508.png)
<script>
var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d")
//设置绘制原点
var x=80,y=150
//设置填充颜色
ctx.fillStyle = "green"
//定义文本
var cName = "人类三大本质"
//设置文本大小和字体
ctx.font = "40px 微软雅黑"
//设置底居中
ctx.textBaseline = "bottom"
ctx.fillText(cName,x,y)
//获取文本宽度
var textWidth = ctx.measureText(cName).width
//绘制直线
ctx.moveTo(x,y)
ctx.lineTo(x+textWidth,y)
ctx.stroke()
</script>
![](https://img2018.cnblogs.com/blog/1813302/201910/1813302-20191010001230605-525556445.png)