摘要：最終效果一定義初始變量外環半徑圓環厚度內環半徑開始角度結束角度圓心坐標圓心坐標將繪圖原點移到畫布中央將畫布旋轉度初始填充顏色二工具方法計算圓環上點的坐標弧度轉角度角度轉弧度三渲染方法渲染函數繪制外環計算外環與內環第一個連接處的中心坐標繪

最終效果

let radius = 140 //外環半徑
let thickness = 20 //圓環厚度
let innerRadius = radius - thickness //內環半徑
let startAngle = -90 //開始角度
let endAngle = 180 //結束角度
let x = 0 //圓心x坐標
let y = 0 //圓心y坐標
let canvas = document.getElementById("tutorial");
canvas.width = 300;
canvas.height = 300;

let ctx = canvas.getContext("2d");
ctx.translate(canvas.width / 2, canvas.height / 2);//將繪圖原點移到畫布中央
ctx.rotate(angle2Radian(225)) //將畫布旋轉225度
ctx.fillStyle = "#f2d7d7"; //初始填充顏色

 //計算圓環上點的坐標
function calcRingPoint(x, y, radius, angle) {
    let res = {}
    res.x = x + radius * Math.cos(angle * Math.PI / 180)
    res.y = y + radius * Math.sin(angle * Math.PI / 180)
    return res
}

//弧度轉角度
function radian2Angle(radian) {
    return 180 * radian / Math.PI
}

//角度轉弧度
function angle2Radian(angle) {
    return angle * Math.PI / 180
}

//渲染函數
function renderRing(startAngle, endAngle) {
     ctx.beginPath();

    //繪制外環
    ctx.arc(x, y, radius, angle2Radian(startAngle), angle2Radian(endAngle))

    //計算外環與內環第一個連接處的中心坐標
    let oneCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, endAngle)

    //繪制外環與內環第一個連接處的圓環
    ctx.arc(oneCtrlPoint.x, oneCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))

    //繪制內環
    ctx.arc(x, y, innerRadius, angle2Radian(endAngle), angle2Radian(startAngle), true)

    //計算外環與內環第二個連接處的中心坐標
    let twoCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, startAngle)

    //繪制外環與內環第二個連接處的圓環
    ctx.arc(twoCtrlPoint.x, twoCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))

    ctx.fill()
    // ctx.stroke()
}

為了方便，代碼中使用弧度的地方一律由角度轉為弧度

1.繪制外環：

這一步最簡單，直接按照官方的使用方法使用即可

2.繪制外環與內環連接處的第一個圓環

首先算出，外環結束處與內環開始處中間點的坐標

計算圓環上點的坐標公式為：

x = x + radius  Math.cos(angle  Math.PI / 180)
y = y + radius  Math.sin(angle  Math.PI / 180)

代入以上公式可算出圓環上任意一點的坐標，然后再以此為圓心，圓環厚度/2為半徑 畫圓環

3.繪制內環

這一步只需將半徑縮短，并將繪制外環的開始角度與結束角度調換即可

4.繪制內環與外環連接處的第二圓環

和第二步同理，先計算出外環開始處與內環結束處中間點的坐標，然后再以此為圓心，圓環厚度/2為半徑 畫圓環

5.完成填充
到這一步，圓環就完成了

 //進度條動畫
ctx.fillStyle = "#e87c7c";
let tempAngle = startAngle
let twoEndAngle = 0
let step = (twoEndAngle - startAngle) / 100
let numberSpan = document.querySelector(".number")
let count = 0
let inter = setInterval(() => {
    if (tempAngle > twoEndAngle) {
        clearInterval(inter)
    } else {
        count++
        numberSpan.innerText = count
        tempAngle += step
    }
    renderRing(startAngle, tempAngle)
}, 16.7)

動態計算結束角度，然后設定一個計數器，重復執行渲染方法。

    
    
    
    
    



    

        
        0 分 
        服務分