H5 animation--an example of canvas drawing percentage progress of a circle

1. Effect drawing

2. Principle
The first step is to draw a full circle with customized color , the second step is to draw an inner circle, the radius of which should be smaller than the outer circle, and the color is customized
The last step is to draw the third circle according to the percentage, and the color is customized.
To achieve the effect of the third step of dynamic drawing, just add a timer function, draw a distance every once in a while, and set a threshold
When it is greater than this threshold, Clear this timer. This threshold is actually the percentage value to be displayed. Each time you draw 0.01.
Note: When drawing in the timer, you need to draw the inner circle in the second step, and the blank circle is also drawn in the timer.

3. Knowledge points
Drawing formula: arc(x, y, radius, startRad, endRad, anticlockwise)
Draw the coordinate point (x, y) is an arc on a circle with center and radius. The starting arc of this arc is startRad, and the ending arc is endRad. The radian here is calculated as the angle of clockwise rotation based on the positive direction of the x-axis (three o'clock on the clock). Anticlockwise indicates whether to start drawing in a counterclockwise or clockwise direction. If true, it means counterclockwise, and if it is false, it means clockwise. The anticlockwise parameter is optional and defaults to false, which means clockwise.

4.jsSource code

<script src="jquery.min.js"></script><script>function circleProgress(value,average){
    var canvas = document.getElementById("yuan");    var context = canvas.getContext(&#39;2d&#39;);    var _this = $(canvas),
    value= Number(value),// 当前百分比,数值
    average = Number(average),// 平均百分比
    color = "",// 进度条、文字样式
    maxpercent = 100,//最大百分比，可设置
    c_width = _this.width(),// canvas，宽度
    c_height =_this.height();// canvas,高度
    // 判断设置当前显示颜色
    if( value== maxpercent ){
        color="#29c9ad";
    }else if( value> average ){
        color="#27b5ff";
    }else{
        color="#ff6100";
    }    // 清空画布
    context.clearRect(0, 0, c_width, c_height);    // 画初始圆
    context.beginPath();    // 将起始点移到canvas中心
    context.moveTo(c_width/2, c_height/2);    // 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2，起始点0，终止点为Math.PI * 2的 整圆
    context.arc(c_width/2, c_height/2, c_height/2, 0, Math.PI * 2, false);
    context.closePath();
    context.fillStyle = &#39;#ddd&#39;; //填充颜色
    context.fill();    // 绘制内圆
    context.beginPath();
    context.strokeStyle = color;
    context.lineCap = &#39;square&#39;;
    context.closePath();
    context.fill();
    context.lineWidth = 10.0;//绘制内圆的线宽度

    function draw(cur){
        // 画内部空白  
        context.beginPath();  
        context.moveTo(24, 24);  
        context.arc(c_width/2, c_height/2, c_height/2-10, 0, Math.PI * 2, true);  
        context.closePath();  
        context.fillStyle = &#39;rgba(255,255,255,1)&#39;;  // 填充内部颜色
        context.fill();        // 画内圆
        context.beginPath();        // 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2-5不与外圆重叠，
        // 起始点-(Math.PI/2)，终止点为((Math.PI*2)*cur)-Math.PI/2的 整圆cur为每一次绘制的距离
        context.arc(c_width/2, c_height/2, c_height/2-5, -(Math.PI / 2), ((Math.PI * 2) * cur ) - Math.PI / 2, false);
        context.stroke();        //在中间写字  
        context.font = "bold 18pt Arial";  // 字体大小，样式
        context.fillStyle = color;  // 颜色
        context.textAlign = &#39;center&#39;;  // 位置
        context.textBaseline = &#39;middle&#39;;  
        context.moveTo(c_width/2, c_height/2);  // 文字填充位置
        context.fillText(value+"%", c_width/2, c_height/2-20);
        context.fillText("正确率", c_width/2, c_height/2+20);
    }    // 调用定时器实现动态效果
    var timer=null,n=0;    function loadCanvas(nowT){
        timer = setInterval(function(){
            if(n>nowT){
                clearInterval(timer);
            }else{
                draw(n);
                n += 0.01;
            }
        },15);
    }
    loadCanvas(value/100);
    timer=null;
}; 
</script>

Finally, you need to call the circleProgress method and pass in the corresponding parameters. The blogger wrote it like this, which is triggered by clicking the button. . .

<input onclick="circleProgress(10,50)" value="画圆" type="button"><canvas id="yuan"></canvas>

【Related recommendations】

1. HTML5 canvas basic drawing to draw curves

2. Detailed explanation of how canvas realizes arcs and circles Example method of ring progress bar

3. Share the example code of h5 canvas circle progress bar

4. Use co processing for small program development Example tutorial of asynchronous process

5. H5 canvas implements circular dynamic loading progress example

The above is the detailed content of H5 animation--an example of canvas drawing percentage progress of a circle. For more information, please follow other related articles on the PHP Chinese website!