dos

Public/static/js/common.js

@@ -188,6 +188,10 @@ let countDownCtx;
 let posterCanvas;
 let posterCtx;
 
+//星星canvas
+let starCanvas;
+let starCtx;
+
 //home next
 let homeNext = true;
 //page1 next
@@ -213,6 +217,25 @@ let canvasinfo = initCanvas('.countdown-canvas', 'countDownCanvas', 257, 257, tr
 countDownCanvas = canvasinfo[0];
 countDownCtx = canvasinfo[1];
 
+//星星canvas定义
+canvasinfo = initCanvas('.star-canvas', 'starCanvas', 640, 1238, true);
+starCanvas = canvasinfo[0];
+starCtx = canvasinfo[1];
+
+let stars = [],
+    square = new Square(starCanvas.width / 2, starCanvas.height / 2),
+    target = {
+        'startX': 500,
+        'startY': 500,
+        'endX': 100,
+        'endY': 100
+    },
+
+    nowX = target.startX,
+    nowY = target.startY,
+    step = 10,
+    stepX = step,
+    stepY = step;
 
 
 //初始化小装饰
@@ -777,6 +800,15 @@ function addFlagToList(text) {
 function showFlagPage() {
     if (page1Next) {
         page1Next = false;
+        calculationStep(target.startX, target.endX, target.startY, target.endY);
+        (function drawFrame() {
+
+            window.requestAnimationFrame(drawFrame, starCanvas);
+            ctx.fillStyle = 'rgba(255, 255, 255, 0)';
+            ctx.clearRect(0, 0, starCanvas.width, starCanvas.height);
+            animateRect(square, target);
+            moveStars();
+        }());
         $('.red-line').addClass('animate');
         setTimeout(function () {
             // $('.red-line').removeClass('animate');
@@ -1030,3 +1062,117 @@ function getTime() {
 function getManBase64(canvas) {
     return canvas.toDataURL('image/png');
 }
+
+
+
+function Star(x, y, rotation) {
+    this.x = x;
+    this.y = y;
+    this.length = 15;
+    this.scaleX = .1;
+    this.scaleY = .1;
+    this.rotation = rotation;
+    this.vx = 0;
+    this.vy = 0;
+    this.alpha = 1;
+}
+
+Star.prototype.draw = function (ctx) {
+    ctx.save();
+    ctx.globalAlpha = this.alpha;
+    ctx.translate(this.x, this.y);
+    ctx.rotate(this.rotation * Math.PI / 180);
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(24, 0);
+    ctx.lineTo(24, 24);
+    ctx.lineTo(0, 24);
+    ctx.closePath();
+    ctx.scale(this.scaleX, this.scaleY);
+    ctx.strokeStyle = 'rgba(0,0,0,0)';
+    ctx.lineCap = 'butt';
+    ctx.lineJoin = 'miter';
+    ctx.miterLimit = 4;
+    ctx.save();
+    ctx.fillStyle = "#f9d073";
+    ctx.beginPath();
+    ctx.moveTo(12, 0.89);
+    ctx.lineTo(15.609, 8.204);
+    ctx.lineTo(23.682, 9.377);
+    ctx.lineTo(17.842, 15.071);
+    ctx.lineTo(19.22, 23.11);
+    ctx.lineTo(12, 19.315);
+    ctx.lineTo(4.78, 23.11);
+    ctx.lineTo(6.159, 15.071);
+    ctx.lineTo(0.318, 9.377);
+    ctx.lineTo(8.39, 8.204);
+    ctx.lineTo(12, 0.89);
+    ctx.closePath();
+    ctx.fill();
+    ctx.stroke();
+    ctx.restore();
+    ctx.restore();
+};
+
+function Square(x, y) {
+    this.x = x;
+    this.y = y;
+}
+
+function calculationStep(startX, endX, startY, endY) {
+    differenceX = Math.abs(endX - startX);
+    differenceY = Math.abs(endY - startY);
+    var max = Math.max(differenceX, differenceY);
+    let minstep = 0;
+
+    if (max == differenceY) {
+        minstep = differenceY / differenceX;
+        stepY = minstep * step;
+    } else {
+        minstep = differenceX / differenceY;
+        stepX = minstep * step;
+    }
+    if (endX - startX < 0) {
+        stepX = -stepX;
+    }
+    if (endY - startY < 0) {
+        stepY = -stepY;
+    }
+}
+
+function animateRect(square, target) {
+    var star, counter = 0;
+    if ((target.startX > target.endX && nowX >= target.endX) ||
+        (target.startX < target.endX && nowX <= target.endX)) {
+        nowX += stepX;
+    }
+    if ((target.startY > target.endY && nowY >= target.endY) ||
+        (target.startY < target.endY && nowY <= target.endY)) {
+        nowY += stepY;
+    } else {
+        return false;
+    }
+
+    square.x = nowX;
+    square.y = nowY;
+    stars.push(new Star(square.x, square.y, Math.random() * 360));
+
+}
+
+function moveStars() {
+    for (var i = 0; i < stars.length; i++) {
+        var star = stars[i];
+        if (star.scaleX <= 1) {
+            star.scaleX += .05;
+            star.scaleY += .05;
+        }
+        if (star.alpha >= .05) {
+            star.alpha -= .015;
+        } else if (star.alpha < .1) {
+            stars.splice(stars[i], 1);
+        }
+        star.x += star.vx;
+        star.y += star.vy;
+        star.draw(ctx);
+    }
+}
\ No newline at end of file