React抽奖转盘源码基于HTML canvas支持即时转动

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/