基于JS+Canvas的lucky-canvas 抽奖功能
作者:vaelcy 发布时间:2024-04-19 09:51:26
标签:js,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)
}
})
来源:https://juejin.cn/post/7104094465048084511
0
投稿
猜你喜欢
- 我的通用权限系统设计是更换权限时候尽量不要涉及到代码修改,来自chinaunix论坛,今天转过来看看。希望对大家有所帮助,对PHP100的朋
- Python 堆栈堆栈是一个后进先出(LIFO)的数据结构. 堆栈这个数据结构可以用于处理大部分具有后进先出的特性的程序流 . 在堆栈中,
- 场景:服务器数据库需要实现每天定时备份1.首先确定备份脚本放置位置个人放置在 /usr/local/backup文件
- 1、ndarray转换成matriximport numpy as npfrom numpy import random,matr_arr=
- 今天,发现了一个之前从未注意的角落,相信能够大大提高自己写JS的速度。能够迅速发现错误。例如,今天的加班中调试一个js错误发现的一个例子。1
- 前言在程序中我们经常可以看到有很多的加密算法,比如说MD5 sha1等,今天我们就来了解下这下加密算法的吧,在了解之前我们需要知道一个模块嘛
- 前言:枚举(enumeration)在许多编程语言中常被表示为一种基础的数据结构使用,枚举帮助组织一系列密切相关的成员到同一个群组机制下,一
- 如下所示:#-*- coding:utf-8 -*-import numpy as npimport matplotlib.pyplot a
- value_counts()方法返回一个序列Series,该序列包含每个值的数量(对于数据框中的任何列,value_counts()方法会返
- 本文实例分析了php中ob_flush函数和flush函数用法。分享给大家供大家参考。具体如下:ob_flush()函数: 取出PHP bu
- 对文本类文件(*.txt;*.html;*.doc;等等),图片类文件(*.jpg;*.gif等等)直接点击链接时会在浏览器打开,而无法出现
- 本文实例为大家分享了python实现学生通讯录管理系统的具体代码,供大家参考,具体内容如下功能模块分析:1.首页(菜单功能)2.添加学生3.
- 事务日志记录着在相关数据库上的操作,同时还存储数据库恢复(recovery)的相关信息。收缩日志的原因有很多种,有些是考虑空间不足,有些则是
- "神经衰弱"翻牌游戏考察玩家的记忆力,游戏的开头会短时间给你看一小部分牌的图案,当玩家翻开两张相同图案牌的时候,会消除,
- Django###request如果说 urls.py 是 Django 中前端页面和后台程序桥梁,那么 request 就是桥上负责运输的
- 今天对add_months函数进行简单总结一下:add_months 函数主要是对日期函数进行操作,在数据查询的过程中进行日期的按月增加,其
- 一 概述在数据库方面,对于非DBA的程序员来说,事务与锁是一大难点,针对该难点,本篇文章试图采用图文的方式来与大家一起探讨。“浅
- cursor就是一个Cursor对象,这个cursor是一个实现了迭代器(def__iter__())和生成器(yield)的MySQLdb
- 什么是转义字符在 HTML 中 <、>、& 等字符有特殊含义(<,> 用于标签中,& 用于转义),他
- 话说这能难倒我吗?赶赶单单~来 ,开搞!一、准备工作用到的软件准备一哈Python 3.8Pycharm 2021.2知识点Python基础