前端实现一个弧形进度条实现拖拽滑动

最新推荐文章于 2022-06-11 18:14:46 发布

岁月的眸

最新推荐文章于 2022-06-11 18:14:46 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_46168848/article/details/116246573

版权

html javascript

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

前端实现一个弧形进度条实现拖拽滑动

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title> 圆形进度条拖拽滑动 </title>
  <style>
 .showdiv{
  left: 10px;
  top:10px;
  transform: rotate(100deg);
  position: absolute;
 }

  </style>
</head>
<body style="background-color: black;">
<div class="showdiv">
<canvas id="canvasId" width="450" height="450"></canvas>
    </div>
<script type="text/javascript">
    var canvas = document.getElementById("canvasId");
    // canvas.style.transform="rotate(100deg)";
    var ctx = canvas.getContext("2d");
    var ox = 225;
    var oy = 225;
    var or = 225;
    var br = 10;
    var moveFlag = false;

    function offset(r,d) {//根据弧度与距离计算偏移坐标
        
        return {x: -Math.sin(r)*d, y: Math.cos(r)*d};
    };

    function draw(n) {
        ctx.clearRect(0,0,canvas.width,canvas.height);//使用clearRect(x,y,width,height)在画布中清除一个矩形;参数：x，Y：要清除的矩形区域的坐标；矩形的宽和高
        ctx.strokeStyle = "#99a";
        ctx.lineWidth = 5;
        ctx.beginPath();
        // ctx.arc(ox,oy,or,1.25*Math.PI,1.75*Math.PI,false);//1/4圆
        ctx.arc(ox,oy,or,(25/18)*Math.PI,(29/18)*Math.PI,false);//2/9圆弧
        // ctx.arc(ox,oy,or,0,2*Math.PI,true);//整圆
        ctx.stroke();
        ctx.strokeStyle = "#69f";
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.arc(ox,oy,or,(2*n+0.5)*Math.PI,(2*n+0.5)*Math.PI,false);
        ctx.stroke();
        ctx.fillStyle = "#69f";
        ctx.font = "50px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        // ctx.fillText(Math.round(n*100-25)+"%",ox,oy);
        // Math.round(n*100-(0.5-(1/18))*100)

        // ctx.fillText((Math.round((100/11)*n*100-(0.5-(1/18))*100))-360+"%",ox,oy);
        ctx.fillText(Math.round(((n-(0.5-1/18))/(1/9))*100)+"%",ox,oy);
        ctx.fillStyle = "#00f";
        ctx.beginPath();
        var d =  offset(n*2*Math.PI,or);
        ctx.arc(ox+d.x,oy+d.y,br,0,2*Math.PI,true);//画圆球
        ctx.fill();
    }
    var on = ("ontouchstart" in document)? {
        start: "touchstart", move: "touchmove", end: "touchend"
    } : {
        start: "mousedown", move: "mousemove", end: "mouseup"
    };

    function getXY(e,obj) {
        var et = e.touches? e.touches[0] : e;
        var x = et.clientX;
        var y = et.clientY;
        return {
            x : x - obj.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),
            y : y - obj.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop)
        }
    }

    canvas.addEventListener(on.start, function(e) {
        moveFlag = true;
    }, false);

    canvas.addEventListener(on.move, function(e) {
        if (moveFlag) {
            var k = getXY(e,canvas);
            var x1=k.x-ox;
            var y1=oy-k.y;
            var R1=x1*x1+y1*y1;
            var r1=Math.pow(R1,0.5);
            var deg=Math.asin((y1/r1));
            var Deg=(Math.PI/180)*100;
            var Sumdeg=deg+Deg;
            var X=r1*Math.cos(Sumdeg);
            var Y=r1*Math.sin(Sumdeg);
            var r = Math.atan2(X,Y);
            var hd = (Math.PI+r)/(2*Math.PI);
            console.log(hd);
            // 半圆的滑动范围判断
            if (hd <=0.5+(1/18) && hd >= 0.5-(1/18)) {
                draw(hd);
            }
        }
    }, false);

    canvas.addEventListener(on.end, function(e) {
        moveFlag = false;
    }, false);

    draw(0.5-(1/18));
</script>

</body>
</html>