How to realize drag and Slide of Circular Progress Bar by JS
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.
