摘要：最終效果一定義初始變量外環(huán)半徑圓環(huán)厚度內(nèi)環(huán)半徑開(kāi)始角度結(jié)束角度圓心坐標(biāo)圓心坐標(biāo)將繪圖原點(diǎn)移到畫(huà)布中央將畫(huà)布旋轉(zhuǎn)度初始填充顏色二工具方法計(jì)算圓環(huán)上點(diǎn)的坐標(biāo)弧度轉(zhuǎn)角度角度轉(zhuǎn)弧度三渲染方法渲染函數(shù)繪制外環(huán)計(jì)算外環(huán)與內(nèi)環(huán)第一個(gè)連接處的中心坐標(biāo)繪

最終效果

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

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

 //計(jì)算圓環(huán)上點(diǎn)的坐標(biāo)
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
}

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

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

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

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

    //計(jì)算外環(huán)與內(nèi)環(huán)第一個(gè)連接處的中心坐標(biāo)
    let oneCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, endAngle)

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

    //繪制內(nèi)環(huán)
    ctx.arc(x, y, innerRadius, angle2Radian(endAngle), angle2Radian(startAngle), true)

    //計(jì)算外環(huán)與內(nèi)環(huán)第二個(gè)連接處的中心坐標(biāo)
    let twoCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, startAngle)

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

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

為了方便，代碼中使用弧度的地方一律由角度轉(zhuǎn)為弧度

1.繪制外環(huán)：

這一步最簡(jiǎn)單，直接按照官方的使用方法使用即可

2.繪制外環(huán)與內(nèi)環(huán)連接處的第一個(gè)圓環(huán)

首先算出，外環(huán)結(jié)束處與內(nèi)環(huán)開(kāi)始處中間點(diǎn)的坐標(biāo)

計(jì)算圓環(huán)上點(diǎn)的坐標(biāo)公式為：

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

代入以上公式可算出圓環(huán)上任意一點(diǎn)的坐標(biāo)，然后再以此為圓心，圓環(huán)厚度/2為半徑 畫(huà)圓環(huán)

3.繪制內(nèi)環(huán)

這一步只需將半徑縮短，并將繪制外環(huán)的開(kāi)始角度與結(jié)束角度調(diào)換即可

4.繪制內(nèi)環(huán)與外環(huán)連接處的第二圓環(huán)

和第二步同理，先計(jì)算出外環(huán)開(kāi)始處與內(nèi)環(huán)結(jié)束處中間點(diǎn)的坐標(biāo)，然后再以此為圓心，圓環(huán)厚度/2為半徑 畫(huà)圓環(huán)

5.完成填充
到這一步，圓環(huán)就完成了

 //進(jìn)度條動(dòng)畫(huà)
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)

動(dòng)態(tài)計(jì)算結(jié)束角度，然后設(shè)定一個(gè)計(jì)數(shù)器，重復(fù)執(zhí)行渲染方法。

    
    
    
    
    



    

        
        0 分 
        服務(wù)分