关于canvas的里fillText文字居中和画布清空重画内容

本文链接： https://blog.csdn.net/Red_sevenWord/article/details/89640784

先在结构中写一个canvas元素

<canvas id="myCanvas1" width="88" height="88"></canvas>

在函数中对于当前元素进行操作,清空画布的内容可以利用改变画布的宽度达到清空的目的
可以用定时器请求数据，重置我下面函数中的a重新描绘画布，以及画布中的文字num数据

modelvisitNumber1 () {
        let a = 7
        let num = 925
        var c = document.getElementById('myCanvas1')
        // 改变宽度清空画布
        c.width = c.width
        var ogc = c.getContext('2d') //返回一个用于在画布上绘图的环境
        ogc.beginPath() //开始一条路径 背景
        ogc.arc(40, 40, 35, 0, 2 * Math.PI) // 画圆值为 圆的中心的 x 坐标,y坐标，半径，起点(3点为0PI)，
        ogc.strokeStyle = '#45126A' //路径的样式
        ogc.lineWidth = 10
        ogc.stroke() //使用 stroke() 方法在画布上绘制确切的路径。
        var ctx = c.getContext('2d')
        ctx.beginPath() //高亮环路径
        ctx.arc(40, 40, 35, -Math.PI / 2, (a * 3.6 - 90) * Math.PI / 180) 
        ctx.strokeStyle = '#FEB09F'
        ctx.lineWidth = 10
        ctx.lineCap = 'butt' //butt平直 round圆 square方
        // 设置文字居中但是fillText的第二个参数必须为画布宽度一半
        ctx.textAlign = 'center'
        ctx.font = 'bold 16px Arial'
        ctx.fillStyle = '#FFFFFF'
        ctx.fillText(a + '%', 44, 35) //fillText里面的可填写的值是，文本内容，x坐标，y坐标，文本最大宽度
        ctx.font = '14px Arial'
        ctx.fillStyle = '#FFFFFF'
        ctx.fillText(num + '次', 44, 50)
        ctx.stroke()
    },

注意：文字居中但是fillText的第二个参数必须为画布宽度一半，而且要先设定textAlign ，然后再设定fillText，否则无效，原因的话emmm，我也不知道，但是我试过确实是要先这样，然后那样，就成功了
效果图如下：
画布展示

关于canvas的里fillText文字居中和画布清空重画内容

猜你喜欢