优化

src/views/single-page/Lottery.vue

@@ -41,7 +41,6 @@
               <span style="color: white; font-weight: bold">{{user.wonName}}</span>
             </div>
           </el-scrollbar>
-
         </div>
       </div>
     </template>
@@ -59,9 +58,6 @@
               justify-content: center;color: white;font-size: 152px;font-weight: bold">
           <span id="winner-div">{{ currentUserName }}</span>
         </div>
-        <div style="position: absolute; top:0;right:0;bottom: 0">
-          <canvas id="canvas"></canvas>
-        </div>
       </div>
     </template>
   </page-layer>
@@ -122,12 +118,10 @@ function winnerExposed() {
     duringLottery.value = false;
     clearInterval(carouselInterval)
     refreshHistory()
-    startFirework()
     const element = document.getElementById('winner-div')
     element.style.transitionDuration = '.5s'
     element.style.transitionTimingFunction = 'ease-in-out'
     element.style.transformOrigin = 'center center'
-
     element.style.transform = `scale(1.3, 1.3)`;
 
     // 完成后重置样式
@@ -136,11 +130,8 @@ function winnerExposed() {
       element.style.removeProperty('transition-timing-function');
       element.style.removeProperty('transform-origin');
       element.style.removeProperty('transform');
-
       if (continuous.value) {
-        setTimeout(() => {
-          startLottery()
-        }, 400);
+        startLottery()
       }
     }, 600);
   })
@@ -246,127 +237,10 @@ onMounted(() => {
   }
   selectLotteryUsers().then(res => {
     lotteryUsers.value = res
-    initFireworkCanvas()
     refreshHistory()
   })
 })
 
-
-let canvas, canvasContext, w, h, particles = [], probability = 0.04,
-    xPoint, yPoint;
-const fireworkRunnable = ref(false)
-
-function initFireworkCanvas() {
-  canvas = document.getElementById("canvas");
-  canvasContext = canvas.getContext("2d");
-  resizeCanvas();
-}
-
-function resizeCanvas() {
-  if (canvas) {
-    w = canvas.width = window.innerWidth;
-    h = canvas.height = window.innerHeight;
-  }
-}
-
-function startFirework() {
-  fireworkRunnable.value = true
-  window.requestAnimationFrame(updateWorld);
-  setTimeout(() => {
-    fireworkRunnable.value = false
-    canvasContext.clearRect(0, 0, canvas.width, canvas.height);
-  }, 4000)
-}
-
-function updateWorld() {
-  if (fireworkRunnable.value) {
-    update();
-    paint();
-    window.requestAnimationFrame(updateWorld);
-  }
-}
-
-function update() {
-  if (particles.length < 500 && Math.random() < probability) {
-    createFirework();
-  }
-  let alive = [];
-  for (let i = 0; i < particles.length; i++) {
-    if (particles[i].move()) {
-      alive.push(particles[i]);
-    }
-  }
-  particles = alive;
-  canvasContext.clearRect(0, 0, canvas.width, canvas.height);
-}
-
-function paint() {
-  canvasContext.globalCompositeOperation = 'source-over';
-  canvasContext.fillStyle = "transparent";
-
-  canvasContext.fillRect(0, 0, w, h);
-  canvasContext.globalCompositeOperation = 'lighter';
-  for (let i = 0; i < particles.length; i++) {
-    particles[i].draw(canvasContext);
-  }
-}
-
-function createFirework() {
-  xPoint = Math.random() * (w - 200) + 100;
-  yPoint = Math.random() * (h - 200) + 100;
-  let nFire = Math.floor(Math.random() * 100) + 100;
-
-  let c1 = 'rgb(255,' + Math.floor((Math.random() * 255)) + ',' + Math.floor((Math.random() * 255)) + ')';
-  let c2 = 'rgb(' + Math.floor((Math.random() * 255)) +  ',255,' + Math.floor((Math.random() * 255)) + ')';
-  let c3 = 'rgb(' + Math.floor((Math.random() * 255)) + ',' + Math.floor((Math.random() * 255)) + ',255)';
-  let c=[c1,c2,c3]
-
-  for (let i = 0; i < nFire; i++) {
-    let particle = new Particle();
-    particle.color = c[Math.floor(Math.random() * 3)];
-    let vy = Math.sqrt(25 - particle.vx * particle.vx);
-    if (Math.abs(particle.vy) > vy) {
-      particle.vy = particle.vy > 0 ? vy : -vy;
-    }
-    particles.push(particle);
-  }
-}
-
-function Particle() {
-  this.w = this.h = Math.random() * 6 + 1;
-  this.x = xPoint - this.w / 2;
-  this.y = yPoint - this.h / 2;
-  this.vx = (Math.random() - 0.5) * 10;
-  this.vy = (Math.random() - 0.5) * 10;
-  this.alpha = Math.random() * .5 + .5;
-  this.color = '';
-}
-
-Particle.prototype = {
-  gravity: 0.05,
-  move: function () {
-    this.x += this.vx;
-    this.vy += this.gravity;
-    this.y += this.vy;
-    this.alpha -= 0.01;
-    return !(this.x <= -this.w || this.x >= screen.width ||
-        this.y >= screen.height ||
-        this.alpha <= 0);
-  },
-  draw: function (c) {
-    c.save();
-    c.beginPath();
-    c.translate(this.x + this.w / 2, this.y + this.h / 2);
-    c.arc(0, 0, this.w, 0, Math.PI * 2);
-    c.fillStyle = this.color;
-    c.globalAlpha = this.alpha;
-    c.closePath();
-    c.fill();
-    c.restore();
-  }
-}
-
-
 </script>
 
 <style scoped>
@@ -383,14 +257,6 @@ Particle.prototype = {
   text-decoration: underline;
 }
 
-.show-history {
-  color: #c2c2c2;
-}
-.show-history:hover {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
 :deep(.el-checkbox) {
   color: white;
 }