text: var self = this
  var circleArr = []
  var showCircleArr = []
  $(document).ready(function() {
      var canvas = document.createElement('canvas'),
          canvasCircleArr
      canvas.id = 'canvas'
      canvas.width = self.window.innerWidth
      canvas.height = self.window.innerHeight / 2
      document.getElementById('drawCanvas').appendChild(canvas)
      canvasCircleArr = canvasCircleInit(canvas)
      $('#btn').click(function () {
          var ctx = canvas.getContext('2d')
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          var value = $('#input').val() ? $('#input').val() : ''
          for(var i = 0; i < showCircleArr.length; i++) {
              var item = showCircleArr[i]
              var x = ~~ (Math.random() * canvas.width)
              var y = ~~ (Math.random() * canvas.height)
              option = {
                  isClick : true,
                  isWord: true,
                  originRadius: ~~ (Math.random() * 3) + 1,
                  radius: ~~ (Math.random() * 3) + 1,
                  color: 'rgba(255, 255, 255, 0.5',
              }
              item.changeOption(option)
              circleArr.push(item)
          }
          showCircleArr = []
          loadCanvas(value, canvas)
      })
      // setTimeout(autoTime.bind(this, 10), 1500) //自动倒计时
  })
  function autoTime(value) {
      if(value > -1) {
          var ctx = canvas.getContext('2d')
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          for(var i = 0; i < showCircleArr.length; i++) {
              var item = showCircleArr[i]
              var x = ~~ (Math.random() * canvas.width)
              var y = ~~ (Math.random() * canvas.height)
              option = {
                  isClick : true,
                  isWord: true,
                  originRadius: ~~ (Math.random() * 3) + 1,
                  radius: ~~ (Math.random() * 3) + 1,
                  color: 'rgba(255, 255, 255, 0.5',
              }
              item.changeOption(option)
              circleArr.push(item)
          }
          showCircleArr = []
          loadCanvas(value, canvas)
          value --
          setTimeout(autoTime.bind(this, value), 1500)
      }
  }
  function Bubble(option) {
      this.width = self.window.innerWidth
      this.height = self.window.innerHeight / 2
      this.originRadius = this.radius = option ? option.radius : 6
      this.color = option ? option.color : '#fff'
      this.lastX = this.x = option ? option.x : ~~ (Math.random() * this.width)       //lastX，lastY为过渡变量，表示粒子从一个地点到下一个地点过渡时使用
      this.lastY = this.y = option ? option.y : ~~ (Math.random() * this.height / 2)
      this.randomX = ~~ (Math.random() * this.width)
      this.randomY = ~~ (Math.random() * this.height)
      this.speed = 4
      this.once = false
      this.isNew = false
      this.isWord = false
  }
  Bubble.prototype.changeOption = function(option) {
      this.originRadius = option.originRadius ? option.originRadius : this.radius
      this.lastRadius = this.radius
      this.radius = option.radius ? option.radius : 6
      this.color = option.color ? option.color : '#fff'
      this.x = option.x ? option.x : this.x
      this.y = option.y ? option.y : this.y
      this.lastY = option.lastY ? option.lastY : this.lastY
      this.lastX = option.lastX ? option.lastX : this.lastX
      this.isNew = option.isNew ? option.isNew : false
      this.isWord = option.isWord ? option.isWord : false
      this.isClick = option.isClick ? option.isClick : false
  }
  Bubble.prototype.draw = function(ctx, randomMove) {
      if(randomMove) {
          var dis = ~~ Math.sqrt(Math.pow(Math.abs(this.x - this.randomX), 2) + Math.pow(Math.abs(this.y - this.randomY), 2)),
              ease = 0.05
          if(this.isWord) {
              var disLastPosition = ~~ Math.sqrt(Math.pow(Math.abs(this.lastX - this.randomX), 2) + Math.pow(Math.abs(this.lastY - this.randomY), 2))
              var ease = 0.05
              if (disLastPosition > 0) {
                  if (this.lastX < this.randomX) {
                      this.lastX += disLastPosition * ease
                  } else {
                      this.lastX -= disLastPosition * ease
                  }
                  if (this.lastY < this.randomY) {
                      this.lastY += disLastPosition * ease
                  } else {
                      this.lastY -= disLastPosition * ease
                  }
              } else {
                  this.lastX = this.randomX
                  this.lastY = this.randomY
                  this.x = this.lastX //更新x,y值
                  this.y = this.lastY
                  this.isWord = false
              }
              ctx.beginPath()
              ctx.arc(this.lastX, this.lastY, this.originRadius, 0, 2 * Math.PI, false)
              ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
              ctx.fill()
              return
          }
          if( dis > 0) {
              if(this.x < this.randomX) {
                  this.x += dis * ease
              } else {
                  this.x -= dis * ease
              }
              if(this.y < this.randomY) {
                  this.y += dis * ease
              } else {
                  this.y -= dis * ease
              }
          } else {
              this.speed = 4
              this.randomX += ~~(Math.random() * (Math.random() > 0.5 ? 5 : -5) * 2)
              this.randomY += ~~(Math.random() * (Math.random() > 0.5 ? 5 : -5) * 2)
          }
          ctx.beginPath()
          ctx.arc(this.x, this.y, this.originRadius, 0, 2 * Math.PI, false)
          ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
          ctx.fill()
  
      } else {
          var x = this.x * 3 + 50,
              y = this.y * 3 + 50,
              dis = ~~ Math.sqrt(Math.pow(Math.abs(this.lastX - x), 2) + Math.pow(Math.abs(this.lastY - y), 2))
          color = this.color || '#fff',
              ease = 0.05,
              maxRaduis = 10
          // if(this.disRadius !== null) { //半径范围变化 尚未完成
          //     this.disRadius = ~~ Math.abs(this.lastRadius - maxRaduis)
          //     if(this.disRadius > 0) {
          //         if(this.lastRadius < maxRaduis) {
          //             this.lastRadius += this.disRadius * ease
          //         } else {
          //             this.lastRadius -= this.disRadius * ease
          //         }
          //         ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
          //         ctx.fill()
          //         ctx.beginPath()
          //         ctx.arc(this.x, this.y, this.lastRadius, 0, 2 * Math.PI, false)
          //         return
          //     }
  
          // }
          // this.disRadius = null
          if (dis > 0) {
              if (this.lastX < x) {
                  this.lastX += dis * ease
              } else {
                  this.lastX -= dis * ease
              }
              if (this.lastY < y) {
                  this.lastY += dis * ease
              } else {
                  this.lastY -= dis * ease
              }
          } else {
              this.lastX = x
              this.lastY = y
          }
  
          ctx.beginPath()
          ctx.arc(this.lastX, this.lastY, this.radius, 0, 2 * Math.PI, false)
          ctx.fillStyle = color || '#fff'
          ctx.fill()
      }
  }
  
  
  function canvasCircleInit(canvas) {
      var ctx = canvas.getContext('2d')
      var self = this
      for(var i = 0; i < 100; i++) {
          var option = {
              radius: ~~(Math.random() * 3) + 1,
              x: ~~ (Math.random() * self.window.innerWidth),
              y: ~~ (Math.random() * self.window.innerHeight / 2),
              color: 'rgba(255, 255, 255, 0.5'
          }
          var bubble = new Bubble(option)
          circleArr.push(bubble)
      }
      function randomMove(ctx) {
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          circleArr.forEach(function (item, index) {
              item.draw(ctx, true)
          })
          showCircleArr.forEach(function(item, index) {
              item.draw(ctx)
          })
          setTimeout(randomMove.bind(self, ctx), 10)
      }
      setTimeout(randomMove.bind(self, ctx), 10)
  
      return circleArr
  }
  function loadCanvas(value, canvasBg) {
      var fontSize = 100,
          width = calWordWidth(value, fontSize),
          canvas = document.createElement('canvas')
      canvas.id = 'b_canvas'
      canvas.width = width
      canvas.height = fontSize
      var ctx = canvas.getContext('2d')
      ctx.font = fontSize + "px Microsoft YaHei"
      ctx.fillStyle = "orange"
      ctx.fillText(value, 0, fontSize / 5 * 4) //轻微调整绘制字符位置
      getImage(canvasBg, canvas, ctx) //导出为图片再导入到canvas获取图像数据
  }
  function getImage(canvasBg, canvas, ctx) {
      var image = new Image()
      image.src = canvas.toDataURL("image/jpeg")
      image.onload = function() {
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          ctx.drawImage(image, 0, 0, this.width, this.height)
          var imageData = ctx.getImageData(0, 0, this.width, this.height)
          var dataLength = imageData.data.length
          var diff = 4
          var newCanvas = document.getElementById('canvas')
          var newCtx = newCanvas.getContext('2d')
          for (var j = 0; j < this.height; j += diff) {
              for (var i = 0; i < this.width; i += diff) {
                  var colorNum = 0
                  for (var k = 0; k < diff * diff; k++) {
                      var row = k % diff
                      var col = ~~(k / diff)
                      let r = imageData.data[((j + col) * this.width + i + row) * 4 + 0]
                      let g = imageData.data[((j + col) * this.width + i + row) * 4 + 1]
                      let b = imageData.data[((j + col) * this.width + i + row) * 4 + 2]
                      if (r < 10 && g < 10 && b < 10) colorNum++
                  }
                  if (colorNum < diff * diff / 3 * 2) {
                      var option = {
                          x: i,
                          y: j,
                          radius: 6,
                          color: '#fff',
                          originRadius: ~~(Math.random() * 3) + 1
                      }
                      var bubble = circleArr.pop()
                      if(!bubble) { //如果画布中的粒子数不够应继续添加，同时新的例子出现的位置应该是随机的
                          option.isNew = true
                          var newBubble = new Bubble(option)
                          var newOption = {
                              lastX: ~~ (Math.random() * canvasBg.width),
                              lastY: ~~ (Math.random() * canvasBg.height),
                              isNew: true
                          }
                          newBubble.changeOption(newOption)
                          showCircleArr.push(newBubble)
                      } else {
                          bubble.changeOption(option)
                          showCircleArr.push(bubble)
                      }
                  }
              }
          }
          // document.getElementById('body').appendChild(canvas) //离屏canvas展现到界面中看到渲染效果
      }
  }
  function calWordWidth(value, fontSize) {
      var arr = value.toString() ? value.toString().split('') : ''
      if(!arr) return
      var reg = /\w/,
          width = 0
      arr.forEach(function (item, index) {
          if (reg.test(item)) {
              width += fontSize //字母宽度
          } else {
              width += fontSize + 10 //汉字宽度
          }
      })
      return width
  }
  