老虎机绘制线的结果

Question

我有以下代码：

<div id="machine">
    <div id="0"></div>
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>
</div>
<div id="play">
    <button>Play</button>
</div>

JSFiddle

我的问题是如何为结果绘制如下所示的线条？

此外，我想知道这是否是制作老虎机的好方法。如果不是如何和用什么呢？

Answer 1

如果你只需要对这些旋转的东西进行编码，那么5个div就可以了，但是如果你想绘制这些线条，我建议你使用画布画出所有的插槽，或者在你的div上放一个透明的画布只绘制线条。

画布参考：http://www.w3schools.com/html/html5_canvas.asp