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

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

代码语言：html

所属分类：电商

代码描述：lucky-canvas实现九宫格抽奖效果代码，不需要依赖其他js，只需要引入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">
  <title>Document</title>
</head>
<body>
  <div id="my-lucky" style="width: 310px; height: 310px;"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lucky-canvas.umd.min.js"></script>
  <script>
    let luckyNum = 1
    // 创建九宫格抽奖
    let luckyGrid = new LuckyCanvas.LuckyGrid('#my-lucky', {
      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/image/luck/button.png', width: '65%', top: '13%' },
          { src: '//repo.bfw.wiki/bfwrepo/image/luck/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',
      .........完整代码请登录后点击上方下载按钮下载查看