您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
JS如何实现圆形进度条拖拽滑动,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
半圆进度条效果
圆形进度条
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 圆形进度条拖拽滑动 </title> </head> <body> <canvas id="canvasId" width="400" height="400"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvasId"); var ctx = canvas.getContext("2d"); var ox = 200; var oy = 200; var or = 180; var br = 15; 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); ctx.strokeStyle = "#99a"; ctx.lineWidth = 5; ctx.beginPath(); ctx.arc(ox,oy,or,0,Math.PI,true);//半圆 // 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,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>
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。