官方网站:
https://100px.net/

新建一个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; |
| 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() |
| |
| |
| const randomAngle = Math.floor(Math.random() * 360); |
| |
| const randomTime = Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000; |
| setTimeout(_ => { |
| |
| myLucky.stop(randomAngle) |
| }, 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> |
| |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)