React 抽奖转盘组件,基于 HTML canvas,支持即时转动,
特点:
即时启动,不必等待抽奖结果的接口返回再启动转盘,先转起来再说~
超时控制
支持主动中断
支持渲染多行文本,多张图片
支持自动旋转
样式完全自定义
缓慢结束效果
安装
npm install turntable-react or use yarn yarn add turntable-react
import Turntable from 'turntable-react'; <Turntable size={300} prizes={prizes} onStart={fetchPrizeResult} onComplete={complete} onTimeout={timeout} > {/* 转盘指针 点击按钮 */} <div className="turntable-pointer"> <img className="pointer-img" src={require('./pointer.png')} alt="" /> </div> </Turntable>
运行
cd turntable-react
yarn && yarn start
open broswer: http://localhost:8080/