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: '//r.........完整代码请登录后点击上方下载按钮下载查看