vue怎么使用canvas繪制圓環

這篇文章主要介紹“vue怎么使用canvas繪制圓環”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue怎么使用canvas繪制圓環”文章能幫助大家解決問題。

效果圖：

// html
<div class="medium-graph">
    <canvas id="medium-graph-canvas" width="292" height="292" />
</div>

// js
mounted() {
        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繪制圓環”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。