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,659 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.

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,639 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
1,990 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
926 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,762 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
440 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,282 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,350 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
15,882 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,392 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,341 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