SOURCE

function timeScaleChartFun() {
            console.info("callback:" + this);
        }

        window.onload = function () {
            var timeOpts = {};
            var canvas = document.getElementById("Chart");
            canvas.width = 600;
            canvas.height = 600;
            canvas.style.width = "600px";
            canvas.style.height = "600px";
            timeOpts.mW = canvas.width
            timeOpts.mH = canvas.width
            timeOpts.lineWidth = 10
            timeOpts.r = timeOpts.mW / 2; //中间位置
            timeOpts.cR = timeOpts.r - 4 * timeOpts.lineWidth; //圆半径
            timeOpts.startAngle = -(1 / 2 * Math.PI); //开始角度
            timeOpts.endAngle = timeOpts.startAngle + 2 * Math.PI; //结束角度
            timeOpts.xAngle = 1 * (Math.PI / 180); //偏移角度量
            timeOpts.fontSize = 55; //字号大小
            timeOpts.tmpAngle = timeOpts.startAngle; //临时角度变量
            timeOpts.startTemp = 10;
            // //回调函数，当鼠标点击和滑动使得其值更改时，会执行此函数，并把更改后的值返回给this
            timeOpts.callback = timeScaleChartFun;
            var chart = new TimeScaleChart(canvas, timeOpts);
            chart.init();
        }

        function TimeScaleChart(canvas, options) {

              this.canvas = canvas;
              this.options = options
              this.ctx = canvas.getContext("2d");
            
              var _this = this;
            //注册touchmove事件，用于监测滑动事件
            this.canvas.addEventListener('touchmove', function (evt) {
                var selectX = evt.changedTouches[0];
                console.log(selectX)
                // for (var i = 0; i < _this.scaleXpointArr.length; i++) {
                //     var tmpValue = Math.abs(_this.scaleXpointArr[i] - selectX * diviceRatio);
                //     if (tmpValue <= tempLength) {
                //         tempLength = tmpValue;
                //         tempIndex = i;
                //     }
                // }
                // options.chooseIndex = tempIndex + 1;

                console.log(_this.options.tmpAngle)

                // _this.options.tmpAngle = 1;
                _this.update(options);
            });
        }

        TimeScaleChart.prototype.init = function () {
            var _this = this;
            _this.draw();
            this.inited = true;
        }

        TimeScaleChart.prototype.update = function (options) {
            this.options = options;
            if (this.inited) {
                this.init();
            }
        }

        TimeScaleChart.prototype.draw = function () {
            var _this = this;
            if(this.options.tmpAngle >= this.options.endAngle){
              return;
            }else if(this.options.tmpAngle + this.options.xAngle > this.options.endAngle){
              this.options.tmpAngle = this.options.endAngle;
            }else{
              this.options.tmpAngle += this.options.xAngle;
            }
            this.ctx.clearRect(0, 0, this.options.mW, this.options.mH);

            //画圈
            this.ctx.save();
            this.ctx.beginPath();
            this.ctx.lineWidth = this.options.lineWidth;
            this.ctx.strokeStyle = '#1c86d1';
            this.ctx.translate(this.options.r, this.options.r); //重定义圆点
            this.ctx.rotate(-Math.PI * 0.5); //最上方为起点  ####(0.5为右侧)
            for(var i = 0; i <= this.options.tmpAngle - this.options.startAngle; i += this.options.xAngle){ //绘图
              this.ctx.moveTo(0, this.options.cR - this.options.lineWidth);
              this.ctx.lineTo(0, this.options.cR);
              this.ctx.rotate(this.options.xAngle); //通过旋转角度和画点的方式绘制圆
            }
            this.ctx.stroke();
            this.ctx.closePath();
            this.ctx.restore();

            //写字
            this.ctx.fillStyle = '#1d89d5';
            this.ctx.font= this.options.fontSize + 'px Microsoft Yahei';
            this.ctx.textAlign='center';
            this.ctx.fillText( Math.round((this.options.tmpAngle -  this.options.startAngle) / (this.options.endAngle - this.options.startAngle) * 50) + '℃', this.options.r, this.options.r + this.options.fontSize / 2);

            // requestAnimationFrame(_this.draw());
        }

<canvas id="Chart" width="" height="500"></canvas>