I. Example diagram

Two, implementation steps

html:

<canvas #canvasDom width="{{width}}" height="{{height}}"Your browser does not support canvas </canvas>Copy the code

1. Set the background ring

// Background ring
drawArc() {
    // Set width and height
    this.context = this.canvasDom.nativeElement.getContext('2d');
    const context = this.context;
    this.canvasDom.nativeElement.width = this.width;
    this.canvasDom.nativeElement.height = this.height;
    // Outer ring
    context.beginPath();
    context.strokeStyle = '#ebebeb'; / / color
    context.arc(100.100.80, (Math.PI / 180) * 270, (Math.PI / 180) * -90.false);
    context.lineWidth = 20;
    context.closePath();
    context.stroke();
    // Set the colored ring
    this.frameArc();
}
Copy the code

2. Set the inner loop-Motion effect

// Dynamic ring
frameArc() {
    const speed = 20; / / speed
    let stepDeg = 0; / / initial value

    let timer = setInterval(() = > {
        stepDeg += 1; // The spacing is 1
        // If the current value is greater than the incoming value, the timer is cleared
        if (stepDeg >= this.rate) {
            clearInterval(timer);
        }
        // Inner ring
        const context = this.context;
        context.beginPath();
        // Set gradient
        const gradient = context.createLinearGradient(0.20.0.120);
        gradient.addColorStop('0'.'#ffaa03');
        gradient.addColorStop('1.0'.'#ff4514');
        context.strokeStyle = gradient;
        context.lineCap = 'round'; // make the shape an arc
        context.arc(100.100.80, (Math.PI / 180) * 270, (Math.PI / 180) * (270 + (stepDeg / 100 * 360)), false);
        context.lineWidth = 20; // Width of the ring
        context.stroke();
        context.closePath();
    }, speed);
}
Copy the code

3. Set the text on the diagram

drawText() { const cans = this.canvasDom.nativeElement.getContext('2d'); cans.font = 'bold 44px Arial'; // font cans. FillStyle = '#676767'; Cans. TextAlign = 'center'; // Center the text (this.rate + '%', this.width / 2, this.height / 2 + 15); }Copy the code