// 计算口号位置

  var solganWidth;

  solganWidth = cardCtx.measureText(slogan).width;

  var offset = (cardCtx.canvas. width- 115 - maxWidth - solganWidth) / 2;

  cardCtx.fillText(slogan, 115 + maxWidth + offset, 50);

  // 画曲线

  cardCtx.beginPath();

  cardCtx.moveTo(115 + maxWidth + offset, 70);

  cardCtx.quadraticCurveTo(115 + maxWidth + offset, 50, 115 + solganWidth + maxWidth + offset, 60);

  cardCtx.strokeStyle = "#ddd";

  cardCtx.stroke();

  cardCtx.restore();

}

// 触发click事件

generateBtn.click();

// 创建和设置animCanvas，该canvas才是真正的显示

var animCanvas = document.getElementById('animCanvas');

var animCtx = animCanvas.getContext('2d');

animCtx.canvas.width = 600;

animCtx.canvas.height = 100;

var circles = [];

setInterval(function() {

  // 擦出画布

  animCtx.clearRect(0, 0, animCtx.canvas.width, animCtx.canvas.height);

  // 把离屏canvas的内容画进来

  animCtx.drawImage(cardCanvas, 0, 0, animCtx.canvas.width, animCtx.canvas.height,

    0, 0, cardCtx.canvas.width, cardCtx.canvas.height);

  // 绘制下落的圆形

  for(var i=0; i<=10; i++) {

    if(!circles[i]) { //为什么这里要取反  还有这里为什么要设置成数组呢 数组里面是空的呢

      circles[i] = {};

      circles[i].radius = Math.floor(Math.random() * 5) + 1;

      circles[i].y = - circles[i].radius - Math.floor(Math.random() * 10);

      circles[i].x = i * 60 + Math.floor(Math.random() * 10) - 5;

      circles[i].vy = Math.floor(Math.random() * 5) + 1;

    }

    animCtx.beginPath();

    animCtx.arc(circles[i].x, circles[i].y, circles[i].radius, 0, Math.PI * 2);

    animCtx.fillStyle = "rgba(255, 255, 255, 0.5)";

    animCtx.fill();

    circles[i].y = circles[i].y + circles[i].vy;

    if(circles[i].y > animCtx.canvas.height + circles[i].radius * 2) {

      circles[i] = undefined;

    }

  }

}, 100);