Lucky-Canvas抽奖插件的使用

官方网站:

https://100px.net/

新建一个空白的js文件’lucky-canvas.js‘,复制官网的JS代码 'https://unpkg.com/lucky-canvas@1.7.25/dist/index.umd.js'

新建一个html网页'lucky-canvas.html',引入刚刚新建的js文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>抽奖</title>
<style>
body{
background-color:#444;
font-size:14px;
text-align:center;
display: flex; /* 使用flexbox布局方式,方便设置网页内容水平和垂直居中 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 视口高度,确保垂直方向也居中 */
}
a{color:#eee}
p{
font-size:50px;
color:#eee;
text-align:center;
bottom:0px;
padding-top:0px;
font-weight:normal;
}
#wenzi{
position: absolute;
top: 0%; /* 与顶部的距离 */
left: 41%; /* 与左侧的距离 */
padding: 0px;
display: flex;
justify-content: center; /* 水平居中 */
}
#my-lucky{
position: absolute;
top: 10%; /* 与顶部的距离 */
left: 25%; /* 与左侧的距离 */
padding: 50px;
display: flex;
justify-content: center; /* 水平居中 */
}
</style>
<script src="/lucky-canvas.js" type="text/javascript"></script>
</head>
<body>
<div id="wenzi"><p>抽奖</p></div>
<div id="my-lucky"></div>
<script>
const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', {
width: '600px',
height: '600px',
blocks: [{ padding: '10px', background: '#ff4500' }],
prizes: [
{ range:2,background: '#e9e8fe', fonts: [{ text: '一等奖' }] ,imgs:[{src:'/mrbs/img/01.png', top:'40px',width: '50%'}]},
{ range:2,background: '#b8c5f2', fonts: [{ text: '二等奖' }] ,imgs:[{src:'/mrbs/img/02.png', top:'40px',width: '50%'}]},
{ range:0,background: '#e9e8fe', fonts: [{ text: '三等奖' }] ,imgs:[{src:'/mrbs/img/03.png', top:'40px',width: '50%'}]},
{ range:0,background: '#b8c5f2', fonts: [{ text: '四等奖' }] ,imgs:[{src:'/mrbs/img/04.png', top:'40px',width: '50%'}]},
{ range:0,background: '#e9e8fe', fonts: [{ text: '五等奖' }] ,imgs:[{src:'/mrbs/img/05.png', top:'40px',width: '50%'}]},
{ range:0,background: '#b8c5f2', fonts: [{ text: '六等奖' }] ,imgs:[{src:'/mrbs/img/01.png', top:'40px',width: '50%'}]},
],
buttons: [
{ radius: '35%', background: '#617df2' },
{ radius: '30%', background: '#afc8ff' },
{
radius: '25%', background: '#869cfa',
pointer: true,
fonts: [{ text: '开始',fontSize:'32px', top: '-20px' }]
},
],
start: function() {
// 开始游戏
myLucky.play()
// 假设接口的请求速度是1s
// 生成一个随机角度作为停止位置
const randomAngle = Math.floor(Math.random() * 360);
// 生成一个1到3秒之间的随机时间
const randomTime = Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000; // 1000毫秒 = 1秒
setTimeout(_ => {
// 停止游戏(使用1-3秒内随机时间),并且使用随机角度
myLucky.stop(randomAngle) //注意: 使用 range 属性时, stop 方法就不能传递中奖索引了, 否则 stop 传递的索引具有优先级, 会无视 range 属性;
}, randomTime)
},
end: function(prize) { // 游戏停止时触发
alert('恭喜中奖: ' + prize.fonts[0].text)
}
})
</script>
</body>
</html>


设置一个炫酷的背景

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool Lights Effect</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #87CEEB; /* 淡蓝色背景 */
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="lights"></canvas>
<script>
const canvas = document.getElementById('lights');
const ctx = canvas.getContext('2d');
const lights = [];
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function createLight() {
const light = {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 5 + 2,
color: `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},0.8)`,
velocity: {
x: (Math.random() - 0.5) * 2,
y: (Math.random() - 0.5) * 2
}
};
lights.push(light);
}
function drawLights() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (const light of lights) {
ctx.beginPath();
ctx.arc(light.x, light.y, light.radius, 0, Math.PI * 2);
ctx.fillStyle = light.color;
ctx.fill();
ctx.closePath();
light.x += light.velocity.x;
light.y += light.velocity.y;
if (light.x + light.radius > canvas.width || light.x - light.radius < 0) {
light.velocity.x = -light.velocity.x;
}
if (light.y + light.radius > canvas.height || light.y - light.radius < 0) {
light.velocity.y = -light.velocity.y;
}
}
}
function update() {
drawLights();
requestAnimationFrame(update);
}
function init() {
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
for (let i = 0; i < 50; i++) {
createLight();
}
update();
}
init();
</script>
</body>
</html>

posted @   红妹妹  阅读(911)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示