使用HTML5画布创建循环时间范围选择？

Question

对于我的一个应用程序，我正在创建循环时间范围选择器小部件。我使用html canvas创建了时钟刻度盘。我需要帮助通过触摸选择时间范围并在表盘上拖动，如图{{3}所示}。点击＆＃34;添加＆＃34;按钮，应清除之前的选择。下次我应该能够设置新的范围。这继续下去。范围值应存储在变量中。它应该适用于移动设备。非常感谢您的帮助。 Circular clock dial

＆＃13;

＆＃13;

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var radius = canvas.height / 2;
    ctx.translate(radius, radius);
    radius = 180;
    drawClock();

    function drawClock() {
      drawFace(ctx, radius);
      drawNumbers(ctx, radius);
    }

    function drawFace(ctx, radius) {
      var grad;
      
      ctx.beginPath();
      ctx.strokeStyle = "rgb(207,207,207)";
      ctx.arc(0, 0, radius, 0, 2*Math.PI);
      ctx.lineWidth = 60;
      ctx.stroke();
      
      
      ctx.beginPath();
      ctx.arc(0, 0, 150, 0, 2*Math.PI);
      ctx.fillStyle = "rgb(243,244,244)";
      ctx.fill();
      
      ctx.beginPath();
      ctx.arc(0, 0, 50, 0, 2*Math.PI);
      ctx.fillStyle = '#333';
      ctx.fill();
      ctx.font = '25pt Calibri';
      ctx.fillStyle = 'white';
      ctx.fillText('SET', -25, 10);
    }

    function drawNumbers(ctx, radius) {
      var ang;
      var num;
      ctx.font = radius*0.20 + "px arial";
      ctx.fillStyle = '#000';
      ctx.textBaseline="middle";
      ctx.textAlign="center";
      for(num = 1; num < 13; num++){
        ang = num * Math.PI / 6;
        ctx.rotate(ang);
        ctx.translate(0, -radius*1);
        ctx.rotate(-ang);
        ctx.fillText(num.toString(), 0, 0);
        ctx.rotate(ang);
        ctx.translate(0, radius*1);
        ctx.rotate(-ang);
    }
    }

＆＃13;

#canvas{
	position: absolute;
	width: 50%;
	left: 35%;
  top:5%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;