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? like lucky wheeel in https://hockey-empire.com/ i'm a newbie, please help me :)

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 in Web Development by gaurav
• 17,580 points
8 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 in Web Development by rajatha
• 7,040 points
66 views
0 votes
1 answer
0 votes
0 answers

How to update HTML element with jQuery and Galleria?

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

1 day ago in Web Development by gaurav
• 17,580 points
4 views
0 votes
1 answer

How to use JQuery with ReactJS

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

answered Jun 22 in Web Development by rajatha
• 7,040 points
14 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 in Web Development by rajatha
• 7,040 points
21 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 in Web Development by gaurav
• 17,580 points
30 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,500 points
307 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,740 points
8,826 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,740 points
15,808 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,740 points
1,289 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP