涛叔

抽奖组件 lucky-canvas 素材大全

2024-12-01 🕸️ ⏳6.3分钟(2.5千字) 创作✍️不易👨‍🌾请勿🚫广告
⛔Warning

文中素材取自互联网，仅供学习研究之用，切勿用于商业用途！

最近需要用到抽奖组件，网上使用最多的是 lucky-canvas1 项目。该项目完成度很高，有大转盘、九宫格和老虎机三种样式，支持 Web 和微信小程序等多种平台。开发者只需要做简单配置就能快速实现抽奖功能。官方还提供大量示例供大家参考。但美中不足，可能 是为了避免版权争议，官方的完整示例部分并没有提供源码和素材。而官方文档中的素材又太素，与实战项目相距甚远。所以我抽空梳理出对应的源码和素材供读者学习参考之用。

本文的重点是分享实战项目中的抽奖组件及其对应的素材。读者可以在当前页面体验各种示例2的视觉和交互效果。如果读者还不熟悉 lucky-canvas 组件的基础用法，请阅读官方文档。

大转盘

基础款

此处先给出基础款大转盘示例，大家好对该组件有一个初步的认识：

const wheel_base = new LuckyCanvas.LuckyWheel('#wheel-base', {
    width: '300px',
    height: '300px',
    blocks: [{ padding: '10px', background: '#617df2' }],
    prizes: [
        { background: '#e9e8fe', fonts: [{ text: '0' }] },
        { background: '#b8c5f2', fonts: [{ text: '1' }] },
        { background: '#e9e8fe', fonts: [{ text: '2' }] },
        { background: '#b8c5f2', fonts: [{ text: '3' }] },
        { background: '#e9e8fe', fonts: [{ text: '4' }] },
        { background: '#b8c5f2', fonts: [{ text: '5' }] },
    ],
    buttons: [{
        radius: '35%',
        background: '#8a9bf3',
        pointer: true,
        fonts: [{ text: '开始', top: '-10px' }]
    }],
    start: function () {
        wheel_base.play()
        setTimeout(() => {
            wheel_base.stop()
        }, 3000)
    }
});

代码中有三个核心配置：

大家可以点击开始按钮体验抽奖效果。

这个转盘虽然能用，但显然无法用于生产环境，太素了。我们需要添加设计素材装饰一番。我是程序员，又不会搞设计，只能参考别人的成果了👻

仿中欧基金

中欧版转盘将素材分成三部分：背景、按钮和奖品：

背景 按键 奖品

该设计用图片承载所有样式。好处是简单实用，在不同的设备上可以获得统一的显示效果。但缺点也很明显，不利于后期维护。无论是想调整奖品信息还是数量，都需要重新出图。

仿潘德妈妈

潘德款转盘素材与中欧款相似，也是分成背景、按键和奖品三部分：

背景 按键 奖品

这里的亮点是利用 javascript 动态生成深浅相间的奖品背景图。后面调整奖品数量时就不用修改背景图了👍

它把文字从奖品图片中分离了出来，一定程度上降低了维护成本，但按钮图片中仍然有部分文字。

仿京东

京东款跟潘德妈妈款几乎一样，但它通过背景图的形式将开始指针挪到了转盘上方。大家要注意这种处理方法。

背景 按键 奖品
✏️Note

lucky-canvas 好像不能调整背景图与奖品图的 zIndex，所以此图中的指针被挡住了😂

仿携程

携程款直接简单粗暴，将所有信息都加到背景图里了，然后让背景图跟着转。估计是项目赶进度的结果，不推荐大家使用这种方式。

背景 按键 奖品

仿哔哩哔哩

B站的版本跟携程的差不多。但它用三张背景图绘制转盘，只有带奖品的那张会跟随转运。因为指针和奖品都是用背景图绘制，所以不存在遮挡问题。

另外，B站款使用两张背景图叠加绘制开始按钮，有需要的读者可以参考。

背景 按键 奖品

以上是大转盘部分的内容。现在说九宫格组件。

九宫格

九宫格顾名思义有九个格子，中间是开始按钮，其余八个放奖品。对于常见的推广活动来说，八个奖品基本能应付大多数情况了。但保不齐有更多奖品的情况，所以该组件还支持圆形模式来展示更多奖品。

我们先说基础款，也就是九宫模式。

基础款

下面是基础九宫格抽奖组件。仔细对比大转盘代码，你就会发现两者几乎一样。唯一的区别是奖品列表和开始按钮的配置中多了x和y坐标字段。

x和y取值为{0,1,2}，从左上角顺时针依次是(0,0),(1,0),(2,0),(2,1),(2,2),(1,2),(0,2),(0,1) 共八个位置放置奖品。中间位置(1,1)放置开启按钮。其他配置跟大转盘组件一样，就不作赘述了。

const grid_base = new LuckyCanvas.LuckyGrid('#grid-base', {
  width: '300px',
  height: '300px',
  blocks: [
    { padding: '10px', background: '#869cfa' },
    { padding: '10px', background: '#e9e8fe' },
  ],
  prizes: [
    { x: 0, y: 0, fonts: [{ text: '', }] },
    { x: 1, y: 0, fonts: [{ text: '', }] },
    { x: 2, y: 0, fonts: [{ text: '', }] },
    { x: 2, y: 1, fonts: [{ text: '', }] },
    { x: 2, y: 2, fonts: [{ text: '', }] },
    { x: 1, y: 2, fonts: [{ text: '', }] },
    { x: 0, y: 2, fonts: [{ text: '', }] },
    { x: 0, y: 1, fonts: [{ text: '', }] },
  ],
  buttons: [{
    x: 1, y: 1,
    background: '#7f95d1',
    fonts: [{ text: '开始', top: '35%' }]
  }],
  defaultStyle: {
    background: '#b8c5f2'
  },
  start: function() {
    grid_base.play()
    setTimeout(() => {
      grid_base.stop()
    }, 3000)
  },
  end: function(prize) {
    // alert('恭喜中奖: ' + prize.fonts[0].text)
  }
});

上面的代码执行效果如下，大家可以点击开始按钮体验抽奖效果。

以上是九宫格模式，下面再给一个圆形模式的示例。

圆形款

说实话，这段代码我也没大研究明白。跟九宫格相比，需要同时指定 rows/cols 和 x/y 参数。官方文档也没太全面。我个人理解是使用 rows/cols 指定行数和列数。对于每一个格子，可以通过 x/y 微调其位置，从而实现圆形排列。

下面代码中 x/y 对应的计算应该就是在调整位置。

const z = 60, // 格子细分数
      s = 12, // 格子大小
      m = 18, // y 轴偏移量
      n = 9,  // x 轴偏移量
      k = 2.8 // 按钮放大的倍数

const grid_base_circle = new LuckyCanvas.LuckyGrid('#grid-base-circle', {
  width: '300px',
  height: '300px',
  rows: z,
  cols: z,
  blocks: [
    { padding: '10px', background: '#869cfa', borderRadius: Infinity },
    { padding: '10px', background: '#e9e8fe', borderRadius: Infinity },
  ],
  prizes: [
    { x: z / 2 - s / 2, y: 0,             col: s, row: s },
    { x: z - m - s / 2, y: n     - s / 2, col: s, row: s },
    { x: z - n - s / 2, y: m     - s / 2, col: s, row: s },
    { x: z - s,         y: z / 2 - s / 2, col: s, row: s },
    { x: z - n - s / 2, y: z - m - s / 2, col: s, row: s },
    { x: z - m - s / 2, y: z - n - s / 2, col: s, row: s },
    { x: z / 2 - s / 2, y: z - s,         col: s, row: s },
    { x: m     - s / 2, y: z - n - s / 2, col: s, row: s },
    { x: n     - s / 2, y: z - m - s / 2, col: s, row: s },
    { x: 0,             y: z / 2 - s / 2, col: s, row: s },
    { x: n     - s / 2, y: m     - s / 2, col: s, row: s },
    { x: m     - s / 2, y: n     - s / 2, col: s, row: s },
  ],
  buttons: [{
    x: z / 2 - s / 2 * k, y: z / 2 - s / 2 * k, col: s * k, row: s * k,
    fonts: [{ text: '开始', top: '43%' }]
  }],
  defaultStyle: {
    borderRadius: Infinity,
    background: '#bac5ee'
  },
  activeStyle: {
    background: '#f7cf9f'
  },
  start: function() {
    grid_base_circle.play()
    setTimeout(() => {
      grid_base_circle.stop()
    }, 2000)
  }
});

说完了基础款，现在我们来分析实战版的素材设计。

仿抖音

抖音版九宫格没有使用图片背景，而是直接叠加多个不同颜色的圆角矩形实现背景效果。按键使用动态的 GIF 格式。但是我为了方便，直接将 GIF 嵌入 Canvas 画布中，导致无法展示动态效果。

所有奖品信息都使用一张图片展示，不利于后期维护，还是建议图文分离。运行抽奖时会高亮显示当前奖品，实际是通过额外展示一张背景图框来实现。

背景 按键 奖品

仿网易严选

网易严选基本跟抖音采用一样的策略，整个背景由 CSS 实现，所有奖品信息都用图片展示。但在实现奖品高亮效果方面，网易严选使用了更笨的办法——提供两套图片😂

我个人认为这是比抖音方案更差的设计，后续维护起来非常麻烦。不建议大家采用。

背景 按键 奖品

仿网易游戏

终于网易游戏给出了一个像样的方案。背景使用图片，开始按钮使用图片叠加方案方案。奖品信息也实现了图文分离。而且除了奖品图片之外还提供了深浅两种背景图。这样组合起来不但能方便地实现抽奖特效，后续维护起来成本也很低。推荐大家参考该方案👍

背景 按键 奖品

仿新东方

新东方款跟前面的差不多，CSS 背景加上部分图文分离。但值得注意的是，它的奖品高亮效果是通过 CSS 调整奖品背景实现的，算是一点创意。

背景 按键 奖品

仿雪球

雪球跟网易严选一样，提供了两套图片，而且文字都在图片中，妥妥的反模式。

背景 按键 奖品

仿好未来

好未来的方案跟网易游戏类似，基本上遵循最佳实践～但它的背景使用 CSS 实现。

背景 按键 奖品

仿艺气山

艺气仙跟网易严选一样，提供了两套奖品图片。但这里也应该注意，因为才服和卡扣式设计，这导致每一个奖品的图片形状都不一样，所以无法使用 CSS 统一控制背景或者用两张不同的背景图来实现高亮效果。所以说在在选择视觉效果的时候也要考虑的后期的维护成本。这是一个非常不错的示例。

背景 按键 奖品

仿咸鱼(圆形)

咸鱼款也跟网易游戏类似，使用两种不同颜色的背景图来实现高亮效果，同样推荐该方案。

背景 按键 奖品

以上就是九宫格组件部分。现在开始说老虎机组件。

老虎机

跟前两种组件不同，老虎机组件不支持buttons属性。换句话说就是使用者需要自己负责绘制开始按钮并通过对应的 API 来控制老虎机的行为。从这个角度上来看，老虎机组件还不成熟。以下内容仅仅是为了跟官方文档保持统一，具体的技术细节请阅读官方文档。

仿抖音

点击图片开始抽奖～

原来的背景图比较高，本例在绘制的时候只展示了上办部分。所有奖品都在一张图片中，实际实用的时候通过 js + canvas 截取了不同的片断。

⛔Warning

注意了，lucky-canvas 内部会缓存生成的图片，使用图片 src 属性作缓存 KEY。因为多个商品共用一个图片，src 一样，会造成缓存冲突。解决的办法是在 src 值的最后添加 hashtag。

背景 按键 奖品

仿滴滴

点击图片开始抽奖～

又一个老虎机，没有什么特别的地方，仅供参考。

背景 按键 奖品

除了设计素材，本文提到的所有 JavaScript 代码都可以从 ./lucky.js 获得。

好了，以上就是本文的主要内容。无论你是程度员还是设计师，只要你也在做抽奖相关的模块，本文应该能帮你节省不少时间。如果真的帮到了你，还请不吝赏作者一杯咖啡☕️😂如果有疑问或者建议，也欢迎留言讨论🤝

微信打赏

  1. https://github.com/buuing/lucky-canvas/↩︎

  2. 我的博客可以在 Markdown 嵌入全功能 JavaScript 和 CSS 内容，大家也可以阅读 ./bird-button.html 体验展示效果😝↩︎