Javascript HTML5 中的旋转轮图像(例如,轮盘赌)?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7668007/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 03:07:27  来源:igfitidea点击:

Spin wheel image in HTML5 (e.g., roulette wheel)?

javascriptiphonehtmlhtml5-canvashtml5-animation

提问by Crashalot

What's the best way to emulate a spinning roulette wheel in HTML5?

在 HTML5 中模拟旋转轮盘的最佳方法是什么?

The wheel spinning should be controllable by some input (i.e., speed of spinning based on some user input). The wheel labels should blur as the wheel spins fast, but as the spinning slows, the labels on the wheel become more and more readable.

轮子旋转应该可以通过一些输入(即基于一些用户输入的旋转速度)来控制。当车轮快速旋转时,车轮标签应该会模糊,但随着旋转速度变慢,车轮上的标签变得越来越易读。

Are there HTML5 libraries that support this, or do the animations need to be programmed by hand?

是否有支持此功能的 HTML5 库,或者动画是否需要手动编程?

This also needs to be supported on iOS devices.

这也需要在 iOS 设备上支持。

回答by katspaugh

It can be done in a few lines of CSS.

它可以在几行 CSS 中完成。

Blurring is an optical effect, it doesn't need to be simulated.

模糊是一种光学效果,不需要模拟。

回答by Zarock

If anyone is interested in doing this using Javascript and HTML5 canvas, see http://www.dougtesting.net/winwheel/index.htmlfor an example. Cool thing is the code is available for download too.

如果有人对使用 Javascript 和 HTML5 画布执行此操作感兴趣,请参阅http://www.dougtesting.net/winwheel/index.html的示例。很酷的是代码也可以下载。

回答by mario.ecc

You can use jfortune, it is a jquery plugin. https://github.com/tehsis/jfortune

您可以使用 jfortune,它是一个 jquery 插件。 https://github.com/tehsis/jfortune

And I know that this could be a bit different from a round/wheel roulette perspective... but fancy-jqyery-plugin looks very interesting and customizable.

而且我知道这可能与轮盘/轮盘赌的角度有所不同……但是fancy-jqyery-plugin 看起来非常有趣且可定制。

http://www.jqueryscript.net/animation/Fancy-jQuery-Plugin-For-Roulette-Image-roulette-js.html

http://www.jqueryscript.net/animation/Fancy-jQuery-Plugin-For-Roulette-Image-roulette-js.html