基于JS+Canvas的lucky-canvas 抽奖功能

目录
  • ucky-canvas 介绍
  • lucky-canvas 功能特点
    • 自由配置
    • 多端适配
    • 响应式
  • 代码块展示
  • 效果图展示
  • 代码如下
    • 抽奖一
    • 抽奖二
    • 抽奖三

ucky-canvas 介绍

一个基于 Js + Canvas 的【大转盘 & 九宫格 & 老虎机】抽奖, 致力于为 web 前端提供一个功能强大且专业可靠的组件, 只需要通过简单配置即可实现自由化定制, 帮助你快速的完成产品需求。

lucky-canvas 功能特点

自由配置

奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置;支持同步 / 异步抽奖;中奖概率前 / 后端可控

多端适配

支持 JS / TS / JQ / Vue / React / 微信小程序 / UniApp / Taro 等;并且多端使用 / 表现形式完全一致

响应式

自动根据设备 dpr 调整清晰度;并支持使用 百分比 / rem / rpx 属性来适配移动端布局

具体详细功能介绍api请看官网

下面我简单写了三个抽奖小demo,大家可做参考。

代码块展示

这里使用掘金的码上掘金展示效果给大家看,ps:里边的图片因为引用的是本地所以不显示,可以看下面效果图的展示

https://code.juejin.cn/pen/7103522105597100039

效果图展示

图片是随便用的本地图片(懒得在网上找图片资源了),大家可自行替换成自己想要的图片哈,我这里就是简单实现一下demo。

代码如下

抽奖一

// 第一个抽奖
const myLucky = new LuckyCanvas.LuckyGrid('#my-lucky', {
    width: '300px',
    height: '300px',
    blocks: [
        { padding: '10px', background: '#869cfa' },
        { padding: '10px', background: '#e9e8fe' },
    ],
    prizes: [
        { x: 0, y: 0, fonts: [{ text: '谢谢参与', top: '40%' }], },
        { x: 1, y: 0, fonts: [{ text: '小米手环', top: '40%' }], },
        { x: 2, y: 0, fonts: [{ text: '苹果13', top: '40%' }], },
        { x: 2, y: 1, fonts: [{ text: '优惠券50', top: '40%' }], },
        { x: 2, y: 2, fonts: [{ text: '优惠券100', top: '40%' }], },
        { x: 1, y: 2, fonts: [{ text: '迷你小冰箱', top: '40%' }], },
        { x: 0, y: 2, fonts: [{ text: '腾讯会员', top: '40%' }], },
        { x: 0, y: 1, fonts: [{ text: '优酷会员', top: '40%' }], },
    ],
    buttons: [
        {
            x: 1, y: 1,
            background: '#9c9dd8',
            fonts: [{ text: '抽奖', top: '40%' }],
        },
    ],
    defaultStyle: {
        background: '#b8c5f2',
        fontSize: '14'
    },
    start: function () {
        // 开始游戏
        myLucky.play()
        // 使用定时器模拟接口
        setTimeout(() => {
            // 结束游戏, 并抽第0号奖品
            myLucky.stop(0)
        }, 3000)
    },
    end: function (event) {
        // 获取抽奖的值
        console.log(event)
    }
})

抽奖二

// 第二个抽奖
const prizeImg2 = {
    src: '../../img/icon1.png',
    activeSrc: '../../img/icon3.png',
    width: '50%',
    top: '25%'
}
const myLucky2 = new LuckyCanvas.LuckyGrid('#my-lucky2', {
    width: '300px',
    height: '300px',
    blocks: [
        { padding: '10px', background: '#869cfa' },
        { padding: '10px', background: '#e9e8fe' },
    ],
    prizes: [
        { x: 0, y: 0, imgs: [prizeImg2] },
        { x: 1, y: 0, imgs: [prizeImg2] },
        { x: 2, y: 0, imgs: [prizeImg2] },
        { x: 2, y: 1, imgs: [prizeImg2] },
        { x: 2, y: 2, imgs: [prizeImg2] },
        { x: 1, y: 2, imgs: [prizeImg2] },
        { x: 0, y: 2, imgs: [prizeImg2] },
        { x: 0, y: 1, imgs: [prizeImg2] },
    ],
    buttons: [
        {
            x: 1, y: 1,
            background: '#9c9dd8',
            fonts: [{ text: '抽奖', top: '40%' }],
        },
    ],
    defaultStyle: {
        background: '#b8c5f2'
    },
    start: function () {
        // 开始游戏
        myLucky2.play()
        // 使用定时器模拟接口
        setTimeout(() => {
            // 结束游戏, 并抽第0号奖品
            myLucky2.stop(0)
        }, 3000)
    },
    end: function (event) {
        // 获取抽奖的值
        console.log(event)
    }
})

抽奖三

// 第三个抽奖
const prizeImg3 = [
    {
        src: '../../img/icon1.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon2.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon3.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon4.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon5.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon6.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon1.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon2.png',
        width: '50%',
        top: '15%'
    }
]
const myLucky3 = new LuckyCanvas.LuckyGrid('#my-lucky3', {
    width: '300px',
    height: '300px',
    blocks: [
        { padding: '10px', background: '#869cfa' },
        { padding: '10px', background: '#e9e8fe' },
    ],
    prizes: [
        { x: 0, y: 0, fonts: [{ text: '谢谢参与', top: '60%' }], imgs: [prizeImg3[0]] },
        { x: 1, y: 0, fonts: [{ text: '小米手环', top: '60%' }], imgs: [prizeImg3[1]] },
        { x: 2, y: 0, fonts: [{ text: '苹果13', top: '60%' }], imgs: [prizeImg3[2]] },
        { x: 2, y: 1, fonts: [{ text: '优惠券50', top: '60%' }], imgs: [prizeImg3[3]] },
        { x: 2, y: 2, fonts: [{ text: '优惠券100', top: '60%' }], imgs: [prizeImg3[4]] },
        { x: 1, y: 2, fonts: [{ text: '迷你小冰箱', top: '60%' }], imgs: [prizeImg3[5]] },
        { x: 0, y: 2, fonts: [{ text: '腾讯会员', top: '60%' }], imgs: [prizeImg3[6]] },
        { x: 0, y: 1, fonts: [{ text: '优酷会员', top: '60%' }], imgs: [prizeImg3[7]] },
    ],
    buttons: [
        {
            x: 1, y: 1,
            background: '#9c9dd8',
            fonts: [{ text: '抽奖', top: '40%' }],
        },
    ],
    defaultStyle: {
        background: '#b8c5f2',
        fontSize: '14'
    },
    start: function () {
        // 开始游戏
        myLucky3.play()
        // 使用定时器模拟接口
        setTimeout(() => {
            // 结束游戏, 并抽第0号奖品
            myLucky3.stop(0)
        }, 3000)
    },
    end: function (event) {
        // 获取抽奖的值
        console.log(event)
    }
})

到此这篇关于基于JS+Canvas的lucky-canvas 抽奖功能的文章就介绍到这了,更多相关lucky canvas 抽奖内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • javascript+HTML5 Canvas绘制转盘抽奖

    之前做过的项目中,有需要抽奖转盘功能的.项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家. 功能需求 1.转盘要美观,转动效果流畅. 2.转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 3.转动动画完成后要有相应提示. 4.获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示. 知识要点 1.引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:http://www.jqcool.net/jquery-jqueryrotate.h

  • javascript HTML5 Canvas实现圆盘抽奖功能

    我们经常参加各种电商优惠活动,比如购买达到一定数额进行抽奖活动,在比如微信抽奖,淘宝抽奖,迅雷赚钱宝圆盘抽奖活动等.这些抽奖活动部分就是由HTML5的Canvas来制作的,今天就为大家分享一下如何使用HTML5的Canvas来制作圆盘抽奖功能.老规矩,先看下效果图吧: 再来看看Canvas的几个主要api: 全部源代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&qu

  • javascript+canvas实现刮刮卡抽奖效果

    运用canvas做的简单刮刮卡效果,每次刷新可重新测试 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me

  • JS+Canvas绘制抽奖转盘

    本文实例为大家分享了JS+Canvas绘制抽奖转盘的具体代码,供大家参考,具体内容如下 给大家分享一个Canvas绘制的转盘抽奖,点击开关开始转动时,转盘开始转动,转盘停止时指针指向的区域即为抽中的奖品,并显示在转盘中间,效果图如下: 动画实的代码如下: <!DOCTYPE html> <html> <head> <style> canvas { background: #eee; } </style> <title>Canvas绘制

  • js HTML5 Canvas绘制转盘抽奖

    本文实例为大家分享了js转盘抽奖的具体代码,供大家参考,具体内容如下 1.实现的基本效果 2.主要的内容 •html5中canvas标签的使用  •jQueryRotate.js旋转插件 3.主要html代码 <body> <div class="content"> <div class="wheel"> <canvas class="item" id="wheelCanvas" wi

  • 基于JS组件实现拖动滑块验证功能(代码分享)

    拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, m

  • 基于JS实现一个随机生成验证码功能

    效果展示 实现原理 1. html:一般就是一个div: <div id="code"></div> ,样式根据需求设计. 2. JS:1)将所有的验证码所用的字符放在一个字符串中 2)在这个字符串的字符个数以内,随机生成索引号 3)根据索引号查找对应字符,拼接成验证码的字符串 代码实现 HTML: <div id="code"></div> CSS: * { margin: 0; padding: 0; } div

  • 基于JS+Canvas的lucky-canvas 抽奖功能

    目录 ucky-canvas 介绍 lucky-canvas 功能特点 自由配置 多端适配 响应式 代码块展示 效果图展示 代码如下 抽奖一 抽奖二 抽奖三 ucky-canvas 介绍 一个基于 Js + Canvas 的[大转盘 & 九宫格 & 老虎机]抽奖, 致力于为 web 前端提供一个功能强大且专业可靠的组件, 只需要通过简单配置即可实现自由化定制, 帮助你快速的完成产品需求. lucky-canvas 功能特点 自由配置 奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置

  • JS HTML图片显示Canvas 压缩功能

    简单到延伸 最新需要js 文件压缩图片上传 以前没搞过,新手把学习过程分享 一.选择图片并显示 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head>

  • js+canvas实现滑动拼图验证码功能

    上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块. <canvas width="310" height="155" id="canvas"></canvas> <canvas width=&q

  • js canvas实现放大镜查看图片功能

    本文实例为大家分享了canvas实现放大镜查看图片功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="background: black;"> <c

  • 基于js Canvas实现二次贝塞尔曲线

    本文实例为大家分享了js Canvas实现二次贝塞尔曲线的具体代码,供大家参考,具体内容如下 先上效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>二次贝塞尔曲线</title> <meta name="Keywords" content=""> <meta name

  • 基于JS简单实现手持弹幕功能+文字抖动特效代码

    前段时间抖音上有个抖动弹幕挺火的,于是决定仿写一个,话不多说,先看效果- 效果展示 GIF图看着有点模糊,但实际效果还是不错的. 第一眼看上去也不知道该咋做,那就先把要实现的功能拆解一下吧. 生成一个铺满全屏的黑色背景,写上文字,然后内容居中 实现无缝滚动 实现文字抖动特效 旋转90度(默认横屏展示) 代码如下 .html <div class="barrage-box"> <div class="text">抖动字幕</div>

  • 基于VUE实现的九宫格抽奖功能

    先给大家展示下效果图: HTML代码: <template> <div class="luckDraw"> <title-bar :title="title"></title-bar> <div class="container"> <div class="turntable-wrapper"> <div class="luck-wrapp

随机推荐