lucky-canvas实现九宫格大转盘抽奖效果代码-html代码-BFW代码库

lucky-canvas实现九宫格大转盘抽奖效果代码

代码语言：html

所属分类：大转盘

代码描述：lucky-canvas实现九宫格大转盘抽奖效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    #my-lucky{
        margin: 10px;
    }
</style>
</head>

<body>
    <div id="my-lucky"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lucky-canvas.js"></script>
    <script>
        let luckyNum = 1
        // 创建九宫格抽奖
        let luckyGrid = new LuckyCanvas.LuckyGrid({
          el: '#my-lucky',
          width: '300px',
          height: '300px'
        }, {
          blocks: [
            { padding: '15px', background: '#ffc27a', borderRadius: 28 },
            { padding: '4px', background: '#ff4a4c', borderRadius: 23 },
            { padding: '4px', background: '#ff625b', borderRadius: 20 },
          ],
          button: {
            x: 1, y: 1,
            background: 'linear-gradient(270deg, #FFDCB8, #FDC689)',
            shadow: '0 5 1 #e89b4f',
            fonts: [
              { text: `${luckyNum} 次`, fontColor: '#fff', top: '73%', fontSize: '11px' },
            ],
            imgs: [
              { src: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/button.png', width: '65%', top: '12%' },
              { src: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/btn.png', width: '50%', top: '73%' }
            ]
          },
          activeStyle: {
            background: 'linear-gradient(270deg, #FFDCB8, #FDC689)',
            shadow: ''
          },
          defaultConfig: {
            gutter: 5,
          },
          defaultStyle: {
            borderRadius: 15,
            fontColor: '#DF424B',
            fontSize: '14px',
            textAlign: 'center',
            background: '#fff�.........完整代码请登录后点击上方下载按钮下载查看