canvas(五)绘制文本

1.绘制描边文本

ctx.strokeText(str,x0,y0)
参数一：需要绘制的文本
参数二三：文本绘制的基点（文字默认在基点的右上方）
它有自己的独立路径

ctx.strokeStyle：设置文本颜色
ctx.font：设置文本,语法与 CSS font 属性相同。详见https://www.runoob.com/cssref/pr-font-font.html

注意：即使拥有独立路径，依然会继承前面代码设置的绘制样式，包括描边颜色，虚线

<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.修改文本对齐方式（水平方向）

文本默认在基点的右上方，也就是左对齐，可以通过相关API来修改文本对齐方式。
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类似，他有以下几个值：
middle：文本垂直方向上居中对齐
top：文本顶对齐
bottom：文本底对齐
baseline：默认

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

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>

可以看出，字体大小越大，相应的文本宽度也就越大。汉字比较有意思，他的字体大小刚好等于一个汉字的大小，6个汉字供占据 40 * 6 = 240，将字体大小修改成20px后，占位6 * 20 = 120

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

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