Wondering what’s next for npm?Check out our public roadmap! »

    canvas-wheel-of-fortune

    0.0.1 • Public • Published

    canvas-wheel-of-fortune

    原生canvas幸运转盘,适合大部分转盘游戏功能需求,通过贝塞尔曲线控制速度。理论上支持小程序,源码不复杂,有需要的同学可以自己修改

    目录

    安装

    npm:

     npm install canvas-wheel-of-fortune

    CDN:

    <script src="./../dist/wheel.min.js"></script>

    示例

    克隆这个仓库,用浏览器打开example目录下index.html文件查看效果

    admin_exp_05

     
        // 奖品的信息,顺时针以角度区分
        const prizeInfo = [
            {
                name: '深紫罗兰色',
                ds: [0, 45]
            },
            {
                name: '海军蓝',
                ds: [45, 90]
            },
            {
                name: '缥色',
                ds: [90, 135]
            },
            {
                name: '青緑',
                ds: [135, 180]
            },
            {
                name: '',
                ds: [180, 225]
            },
            {
                name: '若草色',
                ds: [225, 270]
            },
            {
                name: '栀子色',
                ds: [270, 315]
            },
            {
                name: '黄茶',
                ds: [315, 360]
            },
        ]
     
        // 贝塞尔控制点
        const para = [.04, .63, 0, 1]
     
        // 将网络图片转为img对象
        function downloadImg(arrImgUrl) {
            return new Promise((resolve, reject) => {
                Promise.all(arrImgUrl.map(path => new Promise((resolve, reject) => {
                    const img = new Image();
                    img.onload = () => {
                        resolve(img);
                    };
                    img.src = path;
                }))).then(resolve)
            })
        }
     
        // 获取canvas对象
        const ele = document.getElementById('canvas');
        // 设置canvas画布尺寸
        ele.height = 200;
        ele.width = 200;
        const canvas = ele.getContext('2d');
     
        // 下载网络图片
        downloadImg(['http://space.webhole.online/wheel.png', 'http://space.webhole.online/pointer_center.png']).then(res => {
     
            /**
             *  spinNum 旋转的圈数
             *  prizeInfo 奖品信息
             *  canvas getContext获取到的canvas对象
             *  canvasW canvas宽度
             *  canvasH canvas高度 通常和宽度一样
             *  bgc 圆盘图
             *  poin 指针图
             *  poinCenter 指针是否在画布中心
             *  poinWidth 指针图的宽,高会按照原图的比例自动计算
             **/
     
            // 获取Fortune实例
            const cvs = new wheel.Fortune({ spinNum: 4, prizeInfo, canvas, canvasW: 600, canvasH: 600, bgc: res[0], poin: res[1], poinCenter: true, poinWidth: 60 });
            
            // 传入贝塞尔控制点,默认是匀速转动,
            cvs.bez(...para);
     
            // 传入prizeInfo数组索引可指定获奖对象。不传入索引则随机转动,每个奖项获奖概率相同。如果每个奖项抽中概率不同可以先按照概率算出索引
            cvs.start(2).then(res => {
                // 转动结束得到的结果
                console.log(res);
            });
     
        });

    配置参数

    Fortune Object

    new Fortune({
     
        // 指针是否居中
        poinCenter: Boolean,
     
        // 贝塞尔计算点相乘的倍数,控制这个大小,可以控制转动速度。默认 40
        coeDou: Number,
     
        // 角度阈值,比如不想让指针转动到奖项与奖项之间的分界处可改变这个。 默认 5
        thre: Number,
     
        // 贝塞尔计算点的数量。默认 100
        poinNum: Number,
     
        // 每秒绘制图像的次数。默认 60
        fps: Number,
     
        // 奖项信息,具体数据格式参考示例
        prizeInfo: Array,
     
        // 在转动多少圈之后结束转动。默认 3
        spinNum: Number,
     
        // getContext获取到的canvas对象
        canvas: Object,
     
        // canvas对象的宽度
        canvasW: Number,
     
        // canvas对象的高度
        canvasH: Number,
     
        // 转盘图
        bgc: Image,
     
        // 指针图
        poin: Image,
     
        // poinWidth 指针图的宽,高会按照原图的比例自动计算
        poinWidth: Number,
     
        // 指针x位置 poinCenter 设置为true时可不配置
        poinX: Number,
     
        // 指针y位置 poinCenter 设置为true时可不配置
        poinY: Number,
     
        // 指针转动的角度,转动中心为画布中心
        poinDeg: Number,
     
        // 指针转动的基础速度,效果和设置coeDou差不多。默认 10
        rate: Number
    })

    贝塞尔算法参考 https://segmentfault.com/a/1190000018597975

    License

    MIT

    Install

    npm i canvas-wheel-of-fortune

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    262 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar