LuckyCanvas大转盘图片的转动

最新推荐文章于 2024-07-06 16:47:02 发布

邓波home

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量209

点赞数

文章标签： javascript 前端 html

http://www.shunar.cn http://www.geiar.com http://jgsxx.cn

本文链接：https://blog.csdn.net/dengboblog/article/details/133804511

版权

<div id="my-lucky"></div>

<script>
  const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', {
    width: '240px',
    height: '240px',
    blocks: [
      { padding: '20px' },
      {
        padding: '20px',
        imgs: [{
          src: '/static/imgs/block-img.png',
          width: '100%',
          rotate: true
        }]
      }
    ],
    buttons: [
      { radius: '40%', background: '#617df2' },
      { radius: '35%', background: '#afc8ff' },
      {
        radius: '30%', background: '#869cfa',
        pointer: true,
        fonts: [{ text: '开始', top: '-10px' }]
      },
    ],
    prizes: [
      { title: '手机' },
      { title: '1' },
      { title: '2' },
      { title: '3' },
      { title: '4' },
      { title: '5' },
      { title: '6' },
      { title: '7' },
    ],
defaultConfig: {
  offsetDegree: -20
},
     start: function() {
      // 开始游戏
      myLucky.play()
      // 假设接口的请求速度是1s
      setTimeout(_ => {
        // 停止游戏
        myLucky.stop(0)
      }, 1000)
    },
    end: function(prize) { // 游戏停止时触发
      alert('恭喜中奖: ' + prize.title)
    }
  })

</script>