diff --git a/src/components/Fireworks.vue b/src/components/Fireworks.vue index af12527f..b49c1991 100644 --- a/src/components/Fireworks.vue +++ b/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 { diff --git a/src/utils/index.ts b/src/utils/index.ts index d1bda445..24c9f6b4 100644 --- a/src/utils/index.ts +++ b/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; } \ No newline at end of file