how to spin and stop wheel has custom position with jquery

0 votes

this i my code. I am using this CSS code I want to spin my wheel:

now i want to spin and stop wheel has custom position with jquery? 

var color    = ['#FF0000','#FF0000','#FF0000','#FF0000','#FF0000','#FF0000'];//list color
	var label    = ['googluck', '10%','Thank','10$','5$','10$',"20%"]; //list lable  name 
	var slices   = color.length;
	var sliceDeg = 360/slices;
	var deg      = -90;
	var ctx    = canvas.getContext('2d');
	var width  = canvas.width; // size
	var center = width/2;      // center
		var slices = color.length;
	var sliceDeg = 360 / slices;
	var deg = -90;
	var ctx = canvas.getContext('2d');
	var width = canvas.width;// size
	var center = width / 2; // center
	function deg2rad(deg) {
		return deg * Math.PI / 180;
	}
	function drawSlice(deg, color) {
		ctx.beginPath();
		ctx.fillStyle = color;
		ctx.lineWidth = 2;
		ctx.strokeStyle = "#ffffff";
		ctx.moveTo(center, center);
		ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
		ctx.lineTo(center, center);
		ctx.fill();
		ctx.stroke();
	}

	function drawPoin(deg, color) {
		ctx.beginPath();
		ctx.fillStyle = color;
		ctx.moveTo(center, center);
		ctx.arc(center, center, 50, deg2rad(deg), deg2rad(deg + sliceDeg));
		ctx.lineTo(center, center);
		ctx.fill();
	}
	function drawText(deg, text) {
		ctx.save();
		ctx.translate(center, center);
		ctx.rotate(deg2rad(deg));
		ctx.textAlign = "right";
		ctx.fillStyle = "#fff";
		ctx.font = '18px Arial';
		ctx.shadowColor = "#000000";
		ctx.shadowOffsetX = 0;
		ctx.shadowOffsetY = 0;
		ctx.shadowBlur = 20;
		ctx.fillText(text, center - 25, 10);
		ctx.restore();
	}
	for (var i = 0; i < slices; i++) {
		drawSlice(deg, color[i]);
		drawPoin(deg, '#fff');
		drawText(deg + sliceDeg / 2, label[i]);
		deg += sliceDeg;
	}
<canvas id="canvas" width="500" height="500"></canvas>
Jul 27, 2022 in Web Development by gaurav
• 23,260 points
1,746 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
0 votes

You can do it using setInterval method by changing the degree in each interval, you can modify incrementer value and time setInterval to suit your speed and also break the interval using some flags or conditions

window.setInterval(draw, 1);

var color    = ['#FF0000','#FF0000','#FF0000','#FF0000','#FF0000','#FF0000'];//list color
	var label    = ['googluck', '10%','Thank','10$','5$','10$',"20%"]; //list lable  name 
	var slices   = color.length;
	var sliceDeg = 360/slices;
	var deg      = -90;
	var ctx    = canvas.getContext('2d');
	var width  = canvas.width; // size
	var center = width/2;      // center
		var slices = color.length;
	var sliceDeg = 360 / slices;
	var deg = -90;
	var ctx = canvas.getContext('2d');
	var width = canvas.width;// size
	var center = width / 2; // center
	function deg2rad(deg) {
		return deg * Math.PI / 180;
	}
	function drawSlice(deg, color) {
		ctx.beginPath();
		ctx.fillStyle = color;
		ctx.lineWidth = 2;
		ctx.strokeStyle = "#ffffff";
		ctx.moveTo(center, center);
		ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
		ctx.lineTo(center, center);
		ctx.fill();
		ctx.stroke();
	}

	function drawPoin(deg, color) {
		ctx.beginPath();
		ctx.fillStyle = color;
		ctx.moveTo(center, center);
		ctx.arc(center, center, 50, deg2rad(deg), deg2rad(deg + sliceDeg));
		ctx.lineTo(center, center);
		ctx.fill();
	}
	function drawText(deg, text) {
		ctx.save();
		ctx.translate(center, center);
		ctx.rotate(deg2rad(deg));
		ctx.textAlign = "right";
		ctx.fillStyle = "#fff";
		ctx.font = '18px Arial';
		ctx.shadowColor = "#000000";
		ctx.shadowOffsetX = 0;
		ctx.shadowOffsetY = 0;
		ctx.shadowBlur = 20;
		ctx.fillText(text, center - 25, 10);
		ctx.restore();
	}
    function draw() {
        deg++;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
	    for (var i = 0; i < slices; i++) {
		    drawSlice(deg, color[i]);
		    drawPoin(deg, '#fff');
		    drawText(deg + sliceDeg / 2, label[i]);
		    deg += sliceDeg;
	    }
        if(deg == 0) {
            degreeMultiplier = 0;
            deg=-90;
        }
    }
<canvas id="canvas" width="500" height="500"></canvas>

 

answered Jul 28, 2022 by rajatha
• 7,680 points

edited Mar 5

Related Questions In Web Development

0 votes
1 answer

how to add erroricon and custom validation message using jquery?

By default, the error message is put ...READ MORE

answered Jun 30, 2022 in Web Development by rajatha
• 7,680 points
4,853 views
0 votes
1 answer

html5 video with jquery and inview - how to point to the right video element?

You can make use of this. For more ...READ MORE

answered Aug 5, 2022 in Web Development by rajatha
• 7,680 points
2,205 views
0 votes
0 answers

How to update HTML element with jQuery and Galleria?

I am using Galleria for a slideshow. ...READ MORE

Aug 11, 2022 in Web Development by gaurav
• 23,260 points
1,106 views
0 votes
1 answer

How to use JQuery with ReactJS

Yes, we can use jQuery in ReactJs. ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,680 points

edited Dec 15, 2023 by Soumya 14,961 views
0 votes
1 answer

How to hide a div with jQuery?

We hide the divs by adding a CSS ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
536 views
0 votes
0 answers

How to scroll to top of page with JavaScript/jQuery?

Is there a way to control browser ...READ MORE

Jul 1, 2022 in Web Development by gaurav
• 23,260 points
2,447 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,520 points
1,568 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
16,600 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
23,875 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,840 points
3,577 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP