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 @ 2023-12-21 10:06  红妹妹  阅读(1260)  评论(1)    收藏  举报