簡介：

? ? ? ? 主要是利用HTML中的requestAnimationFrame利用瀏覽器的刷新去推進(jìn)進(jìn)度條，進(jìn)度條主要是生成2D的canvas來顯示

最終效果：

?主要代碼：

<template><div class="container"><canvas id="canvas" width="600" height="900"><p>加載失敗</p></canvas></div> </template> <script> import { onMounted, reactive, toRefs } from 'vue' export default {setup(){const state = reactive({canvas:null,ctx:null,circleX:null,circleY:null,radius:100,percent:100,lineWidth:1,fontSize:42,startnum:0,timer:null, // 加載幀})/*** @description 畫圓*/function circle(cx,cy,r){state.ctx.beginPath()state.ctx.lineWidth = state.lineWidthstate.ctx.strokeStyle = '#666666'state.ctx.lineCap = 'round'state.ctx.shadowColor = '#000000'state.ctx.shadowBlur = 0state.ctx.shadowOffsetX = 0state.ctx.shadowOffsetY = 0state.ctx.arc(cx,cy,r + 10,0,(Math.PI / 180) * 360)state.ctx.moveTo(cx + r,cy)state.ctx.arc(cx,cy,r,0,(Math.PI / 180) * 360)state.ctx.stroke()}/*** @description 畫弧線*/function sector(cx,cy,r,startAngle,endAngle,anti) {state.ctx.beginPath()state.ctx.moveTo(cx,cy - r - 5) // 從圓形底部開始繪畫state.ctx.lineWidth = 12state.ctx.strokeStyle = '#ffccff'/*** @description 圓弧兩端樣式*/state.ctx.lineCap = 'round'state.ctx.shadowColor = '#f600f6'state.ctx.shadowOffsetX = 0state.ctx.shadowOffsetY = 0state.ctx.shadowBlur = 4/*** @description 畫弧*/state.ctx.arc(cx,cy,r + 5,startAngle * (Math.PI / 180.0) - Math.PI / 2,endAngle * (Math.PI / 180.0) -Math.PI / 2,anti)state.ctx.moveTo(cx,cy - r)state.ctx.moveTo(cx,cy - r)state.ctx.stroke()}/*** @description 畫遮蓋*/function cover(cx,cy,r) {state.ctx.beginPath()state.ctx.moveTo(cx,cy - r)state.ctx.clearRect(cx - 8,cy - r -18,6,30)}/*** @description 畫黑色小號圓遮蓋中間部分*/function sectorCover(cx,cy,r,startAngle,endAngle,anti) {state.ctx.beginPath()state.ctx.moveTo(cx,cy - r - 5) // 從圓形底部開始繪畫state.ctx.lineWidth = 10state.ctx.strokeStyle = '#000000'/*** @description 圓弧兩端樣式*/state.ctx.lineCap = 'round'state.ctx.shadowColor = '#000000'state.ctx.shadowOffsetX = 0state.ctx.shadowOffsetY = 0state.ctx.shadowBlur = 0/*** @description 畫弧*/state.ctx.arc(cx,cy,r + 5,startAngle * (Math.PI / 180.0) - Math.PI / 2,endAngle * (Math.PI / 180.0) -Math.PI / 2,anti)state.ctx.moveTo(cx,cy - r)state.ctx.moveTo(cx,cy - r)state.ctx.stroke()}/*** @description 刷新*/function loading(n) {state.ctx.clearRect(0,0,state.circleX * 2,state.circleY * 2) // 清除canvas內(nèi)容/*** @description 中間的字*/console.log('size',state.fontSize);state.ctx.shadowColor = '#f600f6'state.ctx.shadowBlur = 4state.ctx.font = state.fontSize + 'px April'state.ctx.textAlign = 'center'state.ctx.textBaseline = 'middle'state.ctx.fillStyle = '#ffccff'state.ctx.fillText(parseInt(n).toFixed(0) + '%',state.circleX,state.circleY)/*** @description 圓形*/circle(state.circleX,state.circleY,state.radius)/*** @description 圓弧*/sector(state.circleX,state.circleY,state.radius,0,(n / 100) * 360)sectorCover(state.circleX, state.circleY, state.radius, 0, (n / 100) * 360) // 黑色小號實(shí)心圓充當(dāng)背景遮擋cover(state.circleX,state.circleY,state.radius)}/*** @description 循環(huán)*/async function loop() {state.startnum = state.startnum + 1await loading(state.startnum)state.timer = requestAnimationFrame(loop)if(state.startnum === 100){cancelAnimationFrame(state.timer)}}onMounted(() =>{state.canvas = document.getElementById('canvas')state.ctx = state.canvas.getContext('2d')state.circleX = state.canvas.width / 2state.circleY = state.canvas.height / 2loop()})return {...toRefs(state)}} } </script> <style> .container{background-color: #000000; } </style>

總結(jié)

以上是生活随笔為你收集整理的js绘制圆环进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。