Question

我想创建一个轮盘赌，滚动一些数字并显示滚动。
首先，我尝试使用image和backgroundOffset，但是它太滞后了，检查滚动号码时出现了问题。所以我做了那个代码：

<div class="container" style="display: flex">
    <div class="block red">1</div>
    <div class="block black">14</div>
    <div class="block red">2</div>
    <div class="block black">13</div>
    <div class="block red">3</div>
    <div class="block black">12</div>
    <div class="block red">4</div>
    <div class="block green">0</div>
    <div class="block black">11</div>
    <div class="block red">5</div>
    <div class="block black">10</div>
    <div class="block red">6</div>
    <div class="block black">9</div>
    <div class="block red">7</div>
    <div class="block black">8</div>

</div>

JSFIDDLE

如何像here一样制作此卷？

Answer 1

使用canvas API是为<canvas>绘制和动画对象创建对象动画的最有效方法，尤其是在制作游戏时。使用div进行此操作效率较低，导致性能下降。另外，使用canvas API，您可以使用更多工具来便宜地重新绘制和重新生成对象，并且您可以获得更多花哨的外观，而无需为此付出巨大的性能缺点。 $cordovaCamera

除了非常简单的动画外，不要使用setInterval setInterval不会等到上一个动画结束，这意味着在某些情况下，在较弱的机器上，您可以同时运行多个间隔！而且你也无法控制动画。

在html5游戏开发标准中，动画对象的方法是使用requestAnimationFrame（）函数： https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

像轮盘赌一样滚动div内容

1 个答案: