HTML5 中的转轮图像(例如轮盘赌)? [英] Spin wheel image in HTML5 (e.g., roulette wheel)?

问题描述

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

What's the best way to emulate a spinning roulette wheel in 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.

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

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

这也需要在 iOS 设备上得到支持.

This also needs to be supported on iOS devices.

推荐答案

几行CSS就可以搞定.

It can be done in a few lines of CSS.

• http://jsfiddle.net/YNBxz/1/ – 仅 CSS(参见Chrome 或 Safari).
• http://jsfiddle.net/YNBxz/2/ – 使用一些 JavaScript 来演示如何自定义动画.

• http://jsfiddle.net/YNBxz/1/ – CSS-only (see in Chrome or Safari).
• http://jsfiddle.net/YNBxz/2/ – with some JavaScript, to demonstrate how to customize the animation.

模糊是一种光学效果，不需要模拟.

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

这篇关于HTML5 中的转轮图像(例如轮盘赌)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！