JS如何实现圆形进度条拖拽滑动

射流研究…如何实现圆形进度条拖拽滑动，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

效果展示

半圆进度条效果

圆形进度条

代码实现

!doctypehtml

htmllang='en '

头

metachartset=' UTF-8 '/

meta http-equiv=' X-UA-Compatible '内容=' IE=edge，chrome=1'/

标题圆形进度条拖拽滑动/title

/head

身体

canvasId=' canvasId '宽度=' 400 '高度=' 400 '/canvasId

scripttype='text/javascript '

var canvas=文档。getelementbyid(' canvasId ')；

varctx=画布。get context(' 2d ')；

varox=200

varoy=200

varor=180

varbr=15

varmoveFlag=false

functionoffset(r，d){//根据弧度与距离计算偏移坐标

返回{x:-Math.sin(r)*d，y : ath。cos(r)* d }；

};

函数绘图(n){ 0

ctx.clearRect(0，0，canvas.width，canvas。高度)；

ctx.strokeStyle=' # 99a

CTX。线宽=5；

CTX。begin path()；

ctx.arc(ox，oy，or，0，Math .PI，真);//半圆

//ctx.arc(ox，oy，or，0，2*Math .PI，真);//整圆

CTX。笔画()；

ctx.strokeStyle=' # 69f

    ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.arc(ox,oy,or,Math.PI,(n*2+0.5)*Math.PI,false);
        // ctx.arc(ox,oy,or,0.5*Math.PI,(n*2+0.5)*Math.PI,false);
        ctx.stroke();
        ctx.fillStyle = "#69f";
        ctx.font = "80px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(Math.round(n*100-25)+"%",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 r = Math.atan2(k.x-ox, oy-k.y);
            var hd = (Math.PI+r)/(2*Math.PI);
            // 半圆的滑动范围判断
            if (hd <= 0.75 && hd >= 0.25) {
                draw(hd);
            }
        }
    }, false);
    canvas.addEventListener(on.end, function(e) {
        moveFlag = false;
    }, false);
    draw(0.25);
</script>
</body>
</html>

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注行业资讯频道，感谢您对的支持。