Vue中利用canvas添加炫动背景

1.展示页面

<template>
  <div id="main">
  <canvas id="myCanvas" style="background-color: black></canvas>
  </div>
</template>

2.绘制canvas图像，并设置为背景

mounted(){
	//绘制canvas图像
	this.getCanvas();
	//设置canvas图像为背景
	document.getElementById('main').style.backgroundImage = 'url("' + context.canvas.toDataURL() + '")';
}，
methods:{
      getCanvas(){
        var canvas = document.getElementById("myCanvas");
        canvas.width = document.documentElement.clientWidth;
        canvas.height = document.documentElement.clientHeight;
        var ctx = canvas.getContext("2d");
        //创建小球的构造函数
        function Ball() {
          this.x = randomNum(3, canvas.width - 3);
          this.y = randomNum(3, canvas.height - 3);
          this.r = randomNum(1, 3);
          this.color = randomColor();
          this.speedX = randomNum(-3, 3) * 0.2;
          this.speedY = randomNum(-3, 3) * 0.2;
        }
        Ball.prototype = {
		//绘制小球
          draw: function () {
            ctx.beginPath();
            ctx.globalAlpha = 1;
            ctx.fillStyle = this.color;
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
            ctx.fill();
          },
		//小球移动
          move: function () {
            this.x += this.speedX;
            this.y += this.speedY;
		//为了合理性,设置极限值
            if (this.x <= 3 || this.x > canvas.width - 3) {
              this.speedX *= -1;
            }
            if (this.y <= 3 || this.y >= canvas.height - 3) {
              this.speedY *= -1;
            }
          }
        };
		//存储所有的小球
        var balls = [];
		//创建200个小球
        for (var i = 0; i < 150; i++) {
          var ball = new Ball();
          balls.push(ball);
        }
        main();

        function main() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
		//鼠标移动绘制线
          mouseLine();
		//小球与小球之间自动画线
          drawLine();
		//使用关键帧动画，不断的绘制和清除
          window.requestAnimationFrame(main);
        }
		//添加鼠标移动事件
		//记录鼠标移动时的mouseX坐标
        var mouseX;
        var mouseY;
        canvas.onmousemove = function (e) {
          var ev = event || e;
          mouseX = ev.offsetX;
          mouseY = ev.offsetY;
        }
		//判断是否划线

        function drawLine() {
          for (var i = 0; i < balls.length; i++) {
            balls[i].draw();
            balls[i].move();
            for (var j = 0; j < balls.length; j++) {
              if (i != j) {
                if (Math.sqrt(Math.pow((balls[i].x - balls[j].x), 2) + Math.pow((balls[i].y - balls[j].y), 2)) < 80) {
                  ctx.beginPath();
                  ctx.moveTo(balls[i].x, balls[i].y);
                  ctx.lineTo(balls[j].x, balls[j].y);
                  ctx.strokeStyle = "white";
                  ctx.globalAlpha = 0.2;
                  ctx.stroke();
                }
              }
            }
          }
        }
		//使用鼠标移动划线
        function mouseLine() {
          for (var i = 0; i < balls.length; i++) {
            if (Math.sqrt(Math.pow((balls[i].x - mouseX), 2) + Math.pow((balls[i].y - mouseY), 2)) < 80) {
              ctx.beginPath();
              ctx.moveTo(balls[i].x, balls[i].y);
              ctx.lineTo(mouseX, mouseY);
              ctx.strokeStyle = "white";
              ctx.globalAlpha = 0.8;
              ctx.stroke();
            }
          }
        }
		//随机函数
        function randomNum(m, n) {
          return Math.floor(Math.random() * (n - m + 1) + m);
        }
		//随机颜色
        function randomColor() {
          return "rgb(" + randomNum(0, 255) + "," + randomNum(0, 255) + "," + randomNum(0, 255) + ")";
        }
      }
}