canvas(五)绘制文本

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>

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>

• 注意：这个属性会被后面的代码继承

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>

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>

• 注意：参数maxWidth（文本的最大宽度）可选，如果文本的实际宽度大于这个限制，所有的文本会被压扁

5.获取文本的宽度

• 相关语法：ctx.measureText(str)返回一个文本测量结果的对象，其中的width属性描述的就是文本的宽度

• 注意：返回文本宽度除了与文本内容有关，还和当前设定的字体大小相关

<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>

• 实例：为文本添加一条长度相等的下划线

<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>