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> <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> // 设置奖品 const prizes = [] let data = ['1元红包', '100元红包', '0.5元红包', '2元红包', '10元红包', '50元红包', '0.3元红包', '5元红包'] data.forEach((item, index) => { prizes.push({ title: item, background: index % 2 ? '#f9e3bb': '#f8d384', fonts: [{ text: item, top: '10%' }], imgs: [{ src: `//repo.bfw.wiki/bfwrepo/image/luck/${index}.png`, width: '30%', top: '35%' }], }) }) // 创建大转盘抽奖 let luckyWheel = new LuckyCanvas.LuckyWheel('#my-lucky', { prizes: prizes, defa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0