使用canvas做一个圆形进度条

1.html部分

                <div class="circleProgress_wrapper">
                    <canvas class="process" width="200px" height="200px">0%</canvas>

                    <div id="increase" class="add iconfont">&#xe619;</div>
                    <div id="reduce" class="cut iconfont">&#xe614;</div>

                </div>

 

 

2.js部分

$(document).ready(function() {

                $('canvas.process').text(16 + "℃");
                drawProcess1(0.3, 2.18, 200, 200, 15)

                $("#increase").click(function() {
                    var process = $('canvas.process').text();
                    process = parseInt(process) + 1;

                    //addNum(30,100);

                    if(process > 30) {
                        return;
                    }
                    var str = getformat(process);
                    var start = str[0];
                    var end = str[1];
                    $('canvas.process').text(process + "℃");
                    drawProcess1(start, end, 200, 200, 15); //参数分别是，开始弧度，结束弧度，画布高、宽、圆环粗细。

                });
                $("#reduce").click(function() {
                    var process = $('canvas.process').text();
                    process = parseInt(process) - 1;
                    //addNum(30,100);

                    if(process < 16) {
                        return;
                    }
                    var str = getformat(process);
                    var start = str[0];
                    var end = str[1];
                    $('canvas.process').text(process + "℃");
                    drawProcess1(start, end, 200, 200, 15);

                })

                function drawProcess1(start, end, h, w, weight) {

                    $('canvas.process').each(function() {
                        var text = $(this).text();

                        var process = text.substring(0, text.length - 1);

                        //alert(process);
                        var canvas = this;
                        var context = canvas.getContext('2d');
                        context.clearRect(0, 0, h, w);

                        //环背景色，基础背景
                        context.beginPath();
                        context.moveTo(h / 2, w / 2);
                        context.arc(h / 2, w / 2, h / 2, 0.3 * Math.PI, 0.7 * Math.PI, true);
                        context.closePath();

                        context.fillStyle = '#ddd';
                        context.fill();

                        //环前景色渐变色
                        context.beginPath();
                        context.moveTo(h / 2, w / 2);
                        context.arc(h / 2, w / 2, h / 2, start * Math.PI, end * Math.PI, true);

                        context.closePath();
                        var lGrd = context.createLinearGradient(0, 0, 300, 300);
                        lGrd.addColorStop(0, '#ff0000');
                        lGrd.addColorStop(1, '#0000ff');
                        context.fillStyle = lGrd;
                        context.fill();

                        //设置内圆透明
                        context.beginPath();
                        //context.moveTo(h / 2, w / 2);
                        context.arc(h / 2, w / 2, h / 2 - weight, 0.3 * Math.PI, 0.7 * Math.PI, true);

                        context.closePath();
                        var lGrds = context.createLinearGradient(0, 0, 300, 300);
                        lGrds.addColorStop(0, '#2f96fb');
                        lGrds.addColorStop(1, '#2fbdf6');
                        context.fillStyle = lGrds;
                        //context.fillStyle = '#2f96fb';

                        context.fill();

                        //设置内环边框跟百分度
                        context.beginPath();
                        context.arc(h / 2, w / 2, h / 2 - weight, 0 * Math.PI, 0 * Math.PI, true);
                        context.closePath();
                        context.strokeStyle = '#ddd';
                        context.stroke();
                        context.font = "bold 16pt Arial";
                        context.fillStyle = '#FFFFFF';
                        context.textAlign = 'center';
                        context.textBaseline = 'middle';
                        context.moveTo(h / 2, w / 2);
                        context.fillText(text, h / 2, w / 2);
                    });
                }

                function getformat(number) {

                    if(number == 16) {
                        return ["0.3", "2.18"]
                    } else if(number == 17) {
                        return ["0.3", "2.1"]
                    } else if(number == 18) {
                        return ["0.3", "2.0"]
                    } else if(number == 19) {
                        return ["0.3", "1.9"]
                    } else if(number == 20) {
                        return ["0.3", "1.8"]
                    } else if(number == 21) {
                        return ["0.3", "1.7"]
                    } else if(number == 22) {
                        return ["0.3", "1.6"]
                    } else if(number == 23) {
                        return ["0.3", "1.5"]
                    } else if(number == 24) {
                        return ["0.3", "1.4"]
                    } else if(number == 25) {
                        return ["0.3", "1.3"]
                    } else if(number == 26) {
                        return ["0.3", "1.23"]
                    } else if(number == 27) {
                        return ["0.3", "1.099"]
                    } else if(number == 28) {
                        return ["0.3", "0.966"]
                    } else if(number == 29) {
                        return ["0.3", "0.83"]
                    } else if(number == 30) {
                        return ["0.3", "0.7"]
                    }
                }

            });

3.效果图

这就OK了。