15

我希望只使用 CSS 和 jQuery 来绘制命运之轮。我不想使用任何图像。

另外,我希望圆圈中至少有8 个段,并在每个段中正确地垂直对齐每个文本单词。这是一张照片来说明:

在此处输入图像描述

一旦我有了这个工作,我就可以使用CSS3 rotate财产。

知道我该怎么做吗?

4

4 回答 4

17

这是一个使用 Canvas 在 HTML5 中完成的纺车演示:链接 在此处输入图像描述

直接下载到项目演示文件:ZIP


编辑:这是一个不同的教程演示:
使用 html5 画布创建轮盘赌

于 2012-06-21T08:51:23.773 回答
6

这是使用 Canvas的纺车的另一个​​示例

旋转 JavaScript 轮子

于 2012-11-19T00:39:43.380 回答
2

检查此链接-> http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/

它包含一个您需要的介绍性教程。也检查JS 2d Transformationgithub 上的库代码。

于 2012-06-21T05:02:16.113 回答
0

我使用 Raphael 创建了一个轮盘赌:http: //www.guesttime.com/members/ledlogic/roulette/index.html

它像您一样旋转文本,但您必须处理每个字母的居中。

于 2013-03-03T17:15:45.357 回答