修改弹框

src/components/Fireworks.vue

@@ -34,6 +34,7 @@ onMounted(() => {
   }
 
   initAnimate()
+  let count = 0
 
   function animate() {
     ctx.save();
@@ -43,23 +44,25 @@ onMounted(() => {
     ctx.restore();
 
     let newTime = new Date();
-    if (newTime - lastTime > 200 + (window.innerHeight - 767) / 2) {
-      let x = getRandom(canvas.width / 5, (canvas.width * 4) / 5);
-      let y = getRandom(50, 200);
+    if (newTime - lastTime > 200 + (window.innerHeight - 767) / 2 && count === 0) {
+      let boomArea = {
+        x: getRandom(canvas.width / 5, (canvas.width * 4) / 5),
+        y: getRandom(50, 200)
+      }
       let bigBoom = new Boom(
           getRandom(canvas.width / 3, (canvas.width * 2) / 3),
           2,
           "#FFF",
-          {x: x, y: y}
+          boomArea
       );
       bigBooms.push(bigBoom);
       lastTime = newTime;
+      count++
     }
 
     bigBooms.map((itemI) => {
       if (!itemI.dead) {
         itemI._move();
-        itemI._drawLight();
       } else {
         itemI.booms.map((itemJ, index) => {
           if (!itemJ.dead) {
@@ -90,7 +93,7 @@ onMounted(() => {
       this.x = x;
       this.y = canvas.height + r;
       this.r = r;
-      console.log(this.x, this.y, this.r)
+      console.log(this.x, this.y, this.r, boomArea)
       this.color = color;
       this.shape = shape || false;
       this.boomArea = boomArea;
@@ -110,6 +113,22 @@ onMounted(() => {
       }
     }
 
+    _move() {
+      let dx = this.boomArea.x - this.x,
+          dy = this.boomArea.y - this.y;
+      this.x = this.x + dx * 0.01;
+      this.y = this.y + dy * 0.01;
+      console.log(this.x, this.y, dx, this.ba)
+
+      if (Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba) {
+        this._boom();
+        this.dead = true;
+      } else {
+        this._paint();
+        this._drawLight();
+      }
+    }
+
     _paint() {
       ctx.save();
       ctx.beginPath();
@@ -119,22 +138,6 @@ onMounted(() => {
       ctx.restore();
     }
 
-    _move() {
-      let dx = this.boomArea.x - this.x,
-          dy = this.boomArea.y - this.y;
-      this.x = this.x + dx * 0.01;
-      this.y = this.y + dy * 0.01;
-
-      if (Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba) {
-        if (this.shape) {
-          this._shapeBoom();
-        } else this._boom();
-        this.dead = true;
-      } else {
-        this._paint();
-      }
-    }
-
     _drawLight() {
       ctx.save();
       ctx.fillStyle = "rgba(255,228,150,0.3)";
@@ -156,9 +159,9 @@ onMounted(() => {
       let color;
       if (style === 1) {
         color = {
-          a: parseInt(getRandom(128, 255)),
-          b: parseInt(getRandom(128, 255)),
-          c: parseInt(getRandom(128, 255)),
+          a: getRandom(128, 255),
+          b: getRandom(128, 255),
+          c: getRandom(128, 255),
         };
       }
 
@@ -173,12 +176,13 @@ onMounted(() => {
           break;
         }
       }
+
       for (let i = 0; i < fragNum; i++) {
         if (style === 2) {
           color = {
-            a: parseInt(getRandom(128, 255)),
-            b: parseInt(getRandom(128, 255)),
-            c: parseInt(getRandom(128, 255)),
+            a: getRandom(128, 255),
+            b: getRandom(128, 255),
+            c: getRandom(128, 255),
           };
         }
         let a = getRandom(-Math.PI, Math.PI);
@@ -189,97 +193,6 @@ onMounted(() => {
         this.booms.push(frag);
       }
     }
-
-    _shapeBoom() {
-      let that = this;
-      putValue(ocas, octx, this.shape, 5, function (dots) {
-        let dx = canvas.width / 2 - that.x;
-        let dy = canvas.height / 2 - that.y;
-        for (let i = 0; i < dots.length; i++) {
-          let color = {a: dots[i].a, b: dots[i].b, c: dots[i].c};
-          let x = dots[i].x;
-          let y = dots[i].y;
-          let radius = 1;
-          let frag = new Frag(
-              that.x,
-              that.y,
-              radius,
-              color,
-              x - dx,
-              y - dy
-          );
-          that.booms.push(frag);
-        }
-      });
-    }
-  }
-
-  function putValue(canvas, context, ele, dr, callback) {
-    context.clearRect(0, 0, canvas.width, canvas.height);
-    let img = new Image();
-    if (ele.innerHTML.indexOf("img") >= 0) {
-      img.src = ele.getElementsByTagName("img")[0].src;
-      imgload(img, function () {
-        context.drawImage(
-            img,
-            canvas.width / 2 - img.width / 2,
-            canvas.height / 2 - img.width / 2
-        );
-        let dots = getimgData(canvas, context, dr);
-        callback(dots);
-      });
-    } else {
-      let text = ele.innerHTML;
-      context.save();
-      let fontSize = 200;
-      context.font = fontSize + "px 宋体 bold";
-      context.textAlign = "center";
-      context.textBaseline = "middle";
-      context.fillStyle =
-          "rgba(" +
-          parseInt(getRandom(128, 255)) +
-          "," +
-          parseInt(getRandom(128, 255)) +
-          "," +
-          parseInt(getRandom(128, 255)) +
-          " , 1)";
-      context.fillText(text, canvas.width / 2, canvas.height / 2);
-      context.restore();
-      let dots = getimgData(canvas, context, dr);
-      callback(dots);
-    }
-  }
-
-  function imgload(img, callback) {
-    if (img.complete) {
-      callback.call(img);
-    } else {
-      img.onload = function () {
-        callback.call(this);
-      };
-    }
-  }
-
-  function getimgData(canvas, context, dr) {
-    let imgData = context.getImageData(0, 0, canvas.width, canvas.height);
-    context.clearRect(0, 0, canvas.width, canvas.height);
-    let dots = [];
-    for (let x = 0; x < imgData.width; x += dr) {
-      for (let y = 0; y < imgData.height; y += dr) {
-        let i = (y * imgData.width + x) * 4;
-        if (imgData.data[i + 3] > 128) {
-          let dot = {
-            x: x,
-            y: y,
-            a: imgData.data[i],
-            b: imgData.data[i + 1],
-            c: imgData.data[i + 2],
-          };
-          dots.push(dot);
-        }
-      }
-    }
-    return dots;
   }
 
   class Frag {

src/utils/index.ts

@@ -1,3 +1,3 @@
-export function getRandom(a: number, b: number) {
+export function getRandom(a: number, b: number): number {
   return Math.random() * (b - a) + a;
 }