vue怎么使用canvas绘制圆环

这篇文章主要介绍"vue怎么使用canvas绘制圆环"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"vue怎么使用canvas绘制圆环"文章能帮助大家解决问题。

效果图：

// html
    

// jsmounted() {        var medium_canvas = document.getElementById('medium-graph-canvas')        this.drawMain(medium_canvas, 60, 2, '#435377')    },    methods: {        drawMain(drawing_elem, percent, colornums, bgcolor) {            /*                @drawing_elem: 绘制对象                @percent：绘制圆环百分比, 范围[0, 100]                @forecolor: 绘制圆环的前景色，颜色代码                @bgcolor: 绘制圆环的背景色，颜色代码                @colornums: 作为参数传入，绘制哪个颜色            */            var context = drawing_elem.getContext('2d')            var center_x = drawing_elem.width / 2            var center_y = drawing_elem.height / 2            var rad = (Math.PI * 2) / 100            var speed = 0            // 绘制背景圆圈            function backgroundCircle() {                context.save()                context.beginPath()                context.lineWidth = 8 // 设置线宽                var radius = center_x - context.lineWidth                context.lineCap = 'round'                context.strokeStyle = bgcolor                context.arc(center_x, center_y, radius - 14, 0, Math.PI * 2, false)                context.stroke()                context.closePath()                context.restore()            }            // 绘制运动圆环            function foregroundCircle(n) {                context.save()                // context.strokeStyle = forecolor //决定圆环颜色                context.lineWidth = 22                context.lineCap = 'round'                var radius = center_x - context.lineWidth                context.beginPath()                // if (colornums == 1) {                //     var g = context.createLinearGradient(0, 0, 180, 0) // 创建渐变对象  渐变开始点和渐变结束点                //     g.addColorStop(0, '#64C58F') // 添加颜色点                //     g.addColorStop(1, '#0084FF') // 添加颜色点                //     context.strokeStyle = g // 使用渐变对象作为圆环的颜色                // }                if (colornums == 2) {                    var g = context.createLinearGradient(0, 0, 180, 0)                    g.addColorStop(0, '#E7954C')                    g.addColorStop(1, '#D36638')                    context.strokeStyle = g                }                // if (colornums == 3) {                //     var g = context.createLinearGradient(0, 0, 180, 0)                //     g.addColorStop(0, '#FF7C78') //                //     g.addColorStop(1, '#FD413E')                //     context.strokeStyle = g                // }                context.arc(                center_x,                center_y,                radius,                -Math.PI / 4,                -Math.PI / 4 + n * rad,                false                ) // 用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)                context.stroke()                context.closePath()                context.restore()            }            // 绘制文字            function text(n) {                // context.save() // save和restore可以保证样式属性只运用于该段canvas元素                // context.fillStyle = forecolor                // var font_size = 40                // context.font = font_size + 'px Helvetica'                // var text_width = context.measureText(n.toFixed(0) + '%').width                // context.fillText(n.toFixed(0) + '%', center_x - text_width / 2, center_y + font_size / 2)                // context.restore()            }            // 执行动画            (function drawFrame() {                if (speed <= percent) {                    window.requestAnimationFrame(drawFrame)                } else {                    return false                }                context.clearRect(0, 0, drawing_elem.width, drawing_elem.height)                // backgroundCircle()                // text(speed)                foregroundCircle(speed)                if (speed >= percent) {                    speed ++                } else {                    speed += 1                }            })()        }    },

关于"vue怎么使用canvas绘制圆环"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。