Desidero disegnare una Ruota della fortuna usando solo CSS e jQuery. Non voglio usare nessuna immagine.Posso disegnare qualcosa come Wheel of Fortune usando i CSS?
Inoltre, voglio avere almeno 8 segmenti nel cerchio e allineare correttamente ogni parola di testo verticalmente in ogni segmento. Ecco una foto per illustrare:
Una volta che ho questo lavoro ho quindi possibile utilizzare CSS3 rotate proprietà.
Qualche idea come potrei fare questo?
Ecco un Spinning Wheel Demo fatto in HTML5 usando Canvas: LINK 
Download diretto ai file demo di progetto: ZIP
EDIT: Ecco un altro tutorial di demo :
Creating a roulette wheel using html5 canvas
questo era assolutamente perfetto .. proprio quello che volevo..grazie :) –
btw, hai fatto? –
ma in realtà sto provando a girare la ruota usando la proprietà di animazione CSS3 .. E le opzioni di alimentazione devono solo alterare la velocità di rotazione usando nuovamente CSS3 che è possibile sono sicuro –
controllare questo link ->http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/
Esso contiene un tutorial introduttivo per un po 'si ha bisogno. Controlla anche il codice della libreria JS 2d Transformation su github.
css-mask usa le immagini .. voglio solo usare i colori invece e devo anche scrivere del testo su di esso..verrà ancora utile? –
@ Jigar Sì perché no, è necessario impostare il div del testo al posto di come questo post gestisca le immagini e tutto ciò che riguarda un'idea .. si può passare attraverso questo tut e farmi sapere se si riscontrano problemi :) – swapnesh
I ho usato le immagini fin d'ora ... posso vederlo qui [link] (http://codejigz.com/demos/wheeloffortune/wheel.html) ma ho un problema .. Facendo clic sul pulsante di arresto, la ruota shd \ udnt fermarsi all'improvviso..Invece smettere di rallentare .. –
Ecco un altro esempio di un spinning wheel utilizzando una tela
ho creato una roulette con Raphael a: http://www.guesttime.com/members/ledlogic/roulette/index.html
E 'il testo ruotato come si fa, ma che avrebbe dovuto gestire il centraggio per ogni lettera.
Questo è un metodo basato su Canvas HTML5. [** LINK **] (http://halufa.vtec.pt/resistor/) – arttronics