lucky-canvas实现圆盘圆形大转盘抽奖效果代码
代码语言:html
所属分类:大转盘
代码描述:lucky-canvas实现圆盘圆形大转盘抽奖效果代码
代码标签: 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> // 设置奖品 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/images/zhuanpan/4/${index}.png`, width: '30%', top: '35%' }], }) }) // 创建大转盘抽奖 let luckyWheel = new LuckyCanvas.LuckyWheel({ el: '#my-lucky', width: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0