Shulou(Shulou.com)06/03 Report--

JS how to achieve circular progress bar drag and slide, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

Effect display

Semicircle progress bar effect

Circular progress bar

The code implements the circular progress bar drag and slide 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 (Math.sin d) {/ / calculate offset coordinates return {x:-Math.sin (r) * d, y: Math.cos (r) * d} based on radians and distances; function draw (n) {ctx.clearRect; ctx.strokeStyle = "# 99a"; ctx.lineWidth = 5; ctx.beginPath () Ctx.arc (ox,oy,or,0,Math.PI,true); / / semicircle / / ctx.arc (ox,oy,or,0,2*Math.PI,true); / / full circle ctx.stroke (); ctx.strokeStyle = "# 69f"; ctx.lineWidth = 5; ctx.beginPath (); ctx.arc (ox,oy,or,Math.PI, (nude 2x 0.5) * Math.PI,false) / / ctx.arc (ox,oy,or,0.5*Math.PI, (nude 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 (nasty 100-25) + "%", ox,oy) Ctx.fillStyle = "# 00f"; ctx.beginPath (); var d = offset (nasty 2percent Math.Pi); 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 (eMain 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 (eForce canvas); var r = Math.atan2 (k.x-ox, oy-k.y); var hd = (Math.PI+r) / (2*Math.PI) / / judging the sliding range of semicircle if (hd = 0.25) {draw (hd);}, false); canvas.addEventListener (on.end, function (e) {moveFlag = false;}, false); draw (0.25). Is it helpful for you to read the above? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.