16

I wish to draw a Wheel of Fortune using just CSS and jQuery. I don't want to use any images.

Also, I want to have at least 8 segments in the circle and properly align each text word vertically in each segment. Here's a photo to illustrate:

enter image description here

Once I have this working I then can use CSS3 rotate property.

Any idea how could I do this?

arttronics
  • 9,957
  • 2
  • 26
  • 62
Jigar Jain
  • 1,447
  • 1
  • 15
  • 38
  • Using HTML Canvas: [How to Draw a Wheel of Fortune](https://stackoverflow.com/questions/33850201/how-to-draw-a-wheel-of-fortune/33850748?r=SearchResults&s=1%7C56.9912#33850748) – Roko C. Buljan Feb 12 '23 at 14:09

4 Answers4

17

Here's a Spinning Wheel Demo done in HTML5 using Canvas: LINK enter image description here

Direct download to the project demo files : ZIP

EDIT: Here is a different tutorial demo:
Creating a roulette wheel using html5 canvas

driconmax
  • 956
  • 1
  • 18
  • 32
arttronics
  • 9,957
  • 2
  • 26
  • 62
  • this one was absolutely perfect..just what i wanted..thanks :) – Jigar Jain Jun 21 '12 at 10:50
  • but i am actually trying to spin the wheel using CSS3 animation property..And the power options must only alter the speed of spinning using CSS3 again which is possible am sure – Jigar Jain Jun 21 '12 at 10:54
  • Those two demos are not my work and provided by those authors to use as required. A good jQuery plugin to use for rotation is [**jqueryrotate**](http://code.google.com/p/jqueryrotate/wiki/Examples). – arttronics Jun 21 '12 at 11:21
  • Ok..now i have tried my hands on some CSS code..u can see it here [link](http://codejigz.com/demos/wheeloffortune/wheel.html).. So how do i ease the movemment of wheel down slowly on clicking stop button.. – Jigar Jain Jun 21 '12 at 12:26
  • I'm not sure. Consider making a new Stackoverflow Question. – arttronics Jun 21 '12 at 12:35
  • Its awesome.Can you let me know how to get selected value? – PrateekSaluja Nov 30 '12 at 20:54
  • I like this one :) – SourceVisor Feb 17 '18 at 19:48
7

Here is another example of a spinning wheel using a Canvas

Spinning JavaScript wheel

bramp
  • 9,581
  • 5
  • 40
  • 46
2

Check this link -> http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/

It contains an introductory tutorial to somewhat you need. Check for the JS 2d Transformation library code at github too.

swapnesh
  • 26,318
  • 22
  • 94
  • 126
  • css-mask uses images..i just want to use colors instead and also have to write text on it..will it still be useful ? – Jigar Jain Jun 21 '12 at 05:59
  • @Jigar Yes why not, u need to set the text div in place of how this post is managing images and its all about an idea ..you can go through this tut and let me know if u face any problem :) – swapnesh Jun 21 '12 at 06:04
  • I have used images as of now..u can see it here [link](http://codejigz.com/demos/wheeloffortune/wheel.html) but i have a prob..On clicking stop button, the wheel shd\udnt stop at abruptly..Instead it shud slow down.. – Jigar Jain Jun 21 '12 at 12:30
0

I created a roulette wheel using Raphael at: http://www.guesttime.com/members/ledlogic/roulette/index.html

It has the text rotated like you do, but you'd have to handle the centering for each letter.

ledlogic
  • 774
  • 1
  • 9
  • 19