Javascript 我可以使用 CSS 绘制类似命运之轮的东西吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11131706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I draw something like Wheel of Fortune using CSS?
提问by Jigar Jain
I wish to draw a Wheel of Fortune using just CSS and jQuery. I don't want to use any images.
我希望仅使用 CSS 和 jQuery 绘制命运之轮。我不想使用任何图像。
Also, I want to have at least 8 segmentsin the circle and properly align each text word vertically in each segment. Here's a photo to illustrate:
另外，我想在圆圈中至少有8 个片段，并在每个片段中正确地垂直对齐每个文本单词。这是一张照片来说明：
Once I have this working I then can use CSS3 rotateproperty.
一旦我有了这个工作，我就可以使用CSS3 rotate财产。
Any idea how could I do this?
知道我怎么能这样做吗？
回答by arttronics
Here's a Spinning Wheel Demodone in HTML5 using Canvas: LINK
这是使用 Canvas 在 HTML5 中完成的旋转轮演示：链接
Direct download to the project demo files : ZIP
直接下载到项目演示文件：ZIP
EDIT:Here is a different tutorial demo:
Creating a roulette wheel using html5 canvas
编辑：这是一个不同的教程演示：
Creating a Roulette Wheel using html5 canvas
回答by bramp
回答by swapnesh
Check this link -> http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/
检查此链接-> 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 Transformationlibrary code at github too.
它包含您需要的介绍性教程。检查JS 2d Transformationgithub 上的库代码。
回答by ledlogic
I created a roulette wheel using Raphael at: http://www.guesttime.com/members/ledlogic/roulette/index.html
我使用 Raphael 创建了一个轮盘：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.
它像你一样旋转了文本，但你必须处理每个字母的居中。
