以下某个代码直接复制到控制台运行即可在页面上看到相应的效果。仅自己能看到。更多效果后期更新。

1.网页蜘蛛网效果

    var c = document.createElement('canvas')
    c.id = 'canvas-cx'
    document.body.appendChild(c)

    !function () {
        function getAttr(node, attrName, nullVal) {
            return node.getAttribute(attrName) || nullVal
        }
        function getTags(n) {
            return document.getElementsByTagName(n)
        }
        function canvasConfig() {
            var allScriptTag = getTags("script");
            var scriptTagLength = allScriptTag.length;
            var lastScriptTag = allScriptTag[scriptTagLength - 1];
            return {
                scriptTagLength,
                zIndex: getAttr(lastScriptTag, "zIndex", -1),
                opacity: getAttr(lastScriptTag, "opacity", .9),
                lineColor: getAttr(lastScriptTag, "color", "255,0,0"), // 蛛网的颜色改这里
                count: getAttr(lastScriptTag, "count", 100) // 蛛网的数量修改这里
            }
        }
        function setCanvasWidthAndHeight() {
            width = canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            height = canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        }
        function draw() {
            ctx.clearRect(0, 0, width, height);
            var withMouseItem, t, sx, sy, length;
            itemArr.forEach(function (item, index) {
                {
                    item.x += item.xa;
                    item.y += item.ya;
                    item.xa *= item.x > width || item.x < 0 ? -1 : 1;
                    item.ya *= item.y > height || item.y < 0 ? -1 : 1;
                    ctx.fillRect(item.x - .5, item.y - .5, 1, 1);
                }

                for (var j = index + 1; j < withMouseArr.length; j++) {
                    withMouseItem = withMouseArr[j];
                    if (withMouseItem.x !== null && withMouseItem.y !== null) {
                        sx = item.x - withMouseItem.x;
                        sy = item.y - withMouseItem.y;
                        length = Math.sqrt(sx * sx + sy * sy);
                        if (length < withMouseItem.max) {
                            if (withMouseItem === mouse && length >= withMouseItem.max / 2) {
                                item.x -= .03 * sx, item.y -= .03 * sy
                            }
                            t = (withMouseItem.max - length) / withMouseItem.max;
                            ctx.beginPath();
                            ctx.lineWidth = t / 2;
                            ctx.strokeStyle = "rgba(" + d.lineColor + "," + (t + .2) + ")";
                            ctx.moveTo(item.x, item.y);
                            ctx.lineTo(withMouseItem.x, withMouseItem.y);
                            ctx.stroke();
                        }
                    }
                }
            });

            requestAnimationFrame(draw);
        }
        var width;
        var height;
        var d = canvasConfig();
        var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (n) {
                window.setTimeout(n, 1e3 / 45)
            };
        var mouse = { x: null, y: null, max: 150 };
        var canvas = document.getElementById("canvas-cx");
        var ctx = canvas.getContext('2d');
        canvas.id = "c_n" + d.scriptTagLength;
        canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.zIndex + ";opacity:" + d.opacity;
        setCanvasWidthAndHeight();
        window.onresize = setCanvasWidthAndHeight;
        window.onmousemove = function (canvasNode) {
            mouse.x = canvasNode.clientX;
            mouse.y = canvasNode.clientY;
        };
        window.onmouseout = function () {
            mouse.x = null;
            mouse.y = null;
        };
        var itemArr = [];
        for (var f = 0; f < d.count; f++) {
            var x = Math.random() * width;
            var y = Math.random() * height;
            var xa = 2 * Math.random() - 1;
            var ya = 2 * Math.random() - 1;
            itemArr.push({
                x, y, xa, ya, max: 100
            })
        };
        var withMouseArr = itemArr.concat([mouse]);

        setTimeout(function () {
            draw()
        }, 100);
    }();

2.页面泡沫效果

document.body.style.background = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAI0lEQVQIW2NkwAT/GdHE/gP5jMiCYAGQIpggXAAmiCIAEgQAAE4FBbECyZcAAAAASUVORK5CYII=) #222'
  var c = document.createElement('canvas');
  c.style.position = 'fixed'
  c.style.top = 0
  c.style.left = 0
  // c.style.zIndex = -1
  c.id = "c-bubble"
  var _nuxt = document.getElementById("__nuxt")
  document.body.insertBefore(c, _nuxt)
  class Particles {
    constructor() {
      this.colors = ['255, 255, 255', '255, 99, 71', '19, 19, 19'];
      this.blurry = true;
      this.border = false;
      this.minRadius = 10;
      this.maxRadius = 35;
      this.minOpacity = 0.005;
      this.maxOpacity = 0.5;
      this.minSpeed = 0.05;
      this.maxSpeed = 0.5;
      this.fps = 60;
      this.numParticles = 175;
      this.canvas = document.getElementById('c-bubble');
      this.ctx = this.canvas.getContext('2d');
    }
    init() {
      this.render();
      this.createCircle();
    }
    _rand(min, max) {
      return Math.random() * (max - min) + min;
    };
    render() {
      var self = this;
      var wHeight = window.innerHeight;
      var wWidth = window.innerWidth;
      self.canvas.width = wWidth;
      self.canvas.height = wHeight;
      window.addEventListener('resize', () => self.render);
    };
    createCircle() {
      var particle = [];
      for (var i = 0; i < this.numParticles; i++) {
        var self = this;
        var color = self.colors[~~self._rand(0, self.colors.length)];
        particle[i] = {
          radius: self._rand(self.minRadius, self.maxRadius),
          xPos: self._rand(0, this.canvas.width), 
          yPos: self._rand(0, this.canvas.height),
          xVelocity: self._rand(self.minSpeed, self.maxSpeed),
          yVelocity: self._rand(self.minSpeed, self.maxSpeed),
          color: `rgba(${color},${self._rand(self.minOpacity, self.maxOpacity)})`
        };

        self.draw(particle, i);
      }
      self.animate(particle, this);
    };
    draw(particle, i) {
      var self = this;
      var ctx = self.ctx;

      if (self.blurry === true) {
        var grd = ctx.createRadialGradient(
          particle[i].xPos,
          particle[i].yPos,
          particle[i].radius,
          particle[i].xPos,
          particle[i].yPos,
          particle[i].radius / 1.5
        );
        grd.addColorStop(0.0, 'rgba(34, 34, 34, 0)');
        grd.addColorStop(1.0, particle[i].color); 
        ctx.fillStyle = grd;
      } else {
        ctx.fillStyle = particle[i].color;
      }

      if (self.border === true) {
        ctx.strokeStyle = '#fff';
        ctx.stroke();
      }
      ctx.beginPath();
      ctx.arc(
        particle[i].xPos,
        particle[i].yPos,
        particle[i].radius,
        0,
        2 * Math.PI,
        false
      );
      ctx.fill();
    };
    animate(particle, self) {
      var ctx = self.ctx;
      self.clearCanvas();

      var ani = function () {
        self.clearCanvas();
        for (var i = 0; i < self.numParticles; i++) {
          particle[i].xPos += particle[i].xVelocity;
          particle[i].yPos -= particle[i].yVelocity;
          if (
            particle[i].xPos > self.canvas.width + particle[i].radius ||
            particle[i].yPos > self.canvas.height + particle[i].radius
          ) {
            self.resetParticle(particle, i);
          } else {
            self.draw(particle, i);
          }
        }
        requestAnimationFrame(ani)
      }
      ani()
    };
    resetParticle(particle, i) {
      var self = this;
      var random = self._rand(0, 1);
      if (random > 0.5) {
        particle[i].xPos = -particle[i].radius;
        particle[i].yPos = self._rand(0, this.canvas.height);
      } else {
        particle[i].xPos = self._rand(0, this.canvas.width);
        particle[i].yPos = this.canvas.height + particle[i].radius;
      }
      self.draw(particle, i);
    };

    clearCanvas() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    };

  }
  var particle = new Particles();
  particle.init();

3.彩虹雨

  var c = document.createElement("canvas")
  c.id = 'canvas'
  c.style.position = 'fixed'
  c.style.top = 0
  c.style.left = 0
  c.style.zIndex = -1
  document.body.appendChild(c)

  var w = (c.width = window.innerWidth),
    h = (c.height = window.innerHeight),
    ctx = c.getContext('2d'),
    total = w,
    accelleration = 0.02,
    size = w / total,
    occupation = w / total,
    repaintColor = 'rgba(0, 0, 0, .04)';
  (colors = []), (dots = []), (dotsVel = []);
  var portion = 360 / total;
  for (var i = 0; i < total; ++i) {
    colors[i] = portion * i;

    dots[i] = h;
    dotsVel[i] = 10;
  }

  function anim() {
    window.requestAnimationFrame(anim);

    ctx.fillStyle = repaintColor;
    ctx.fillRect(0, 0, w, h);

    for (var i = 0; i < total; ++i) {
      var currentY = dots[i] - 1;
      dots[i] += dotsVel[i] += accelleration;

      ctx.fillStyle = 'hsl(' + colors[i] + ', 80%, 50%)';
      ctx.fillRect(occupation * i, currentY, size, dotsVel[i] + 1);

      if (dots[i] > h && Math.random() < 0.01) {
        dots[i] = dotsVel[i] = 0;
      }
    }
  }
  anim();

4.鼠标点击出现爱心

var c = document.createElement("canvas")
        c.width = window.innerWidth
        c.height = window.innerHeight
        c.id = "canvas"
        c.style.position = "fixed"
        c.style.left = 0
        c.style.top = 0
        c.style.zIndex = -1
        document.body.appendChild(c)

        ! function (global, doc) {
            var c = document.getElementById('canvas')
            var ctx = c.getContext('2d');
            var w = c.width = window.innerWidth
            var h = c.height = window.innerHeight
            var heartArr = [];

            function drawHeart(x, y, scale, color) {
                ctx.save(); // save()and restore()保存状态
                ctx.scale(scale, scale) // 直接缩放画布，实现爱心缩放效果
                ctx.beginPath();
                // 这里需要除以一个缩放值，否则位置会不对
                ctx.moveTo((x - 8) / scale, (y - 8) / scale);
                ctx.lineTo(x / scale, y / scale);
                ctx.lineTo(x / scale + 8, y / scale - 8);
                ctx.arc((x + 4) / scale, (y - 9) / scale, 4, 0, Math.PI, true);
                ctx.arc((x - 4) / scale, (y - 9) / scale, 4, 0, Math.PI, true);
                ctx.closePath();

                ctx.fillStyle = color;
                ctx.fill();
                ctx.restore();
            }

            function render() {
                ctx.clearRect(0, 0, w, h)
                for (var i = 0; i < heartArr.length; i++) {
                    if (heartArr[i].alpha <= 0) {
                        // 由于心在点击之后会逐渐变透明，当透明度小于等于0时，将其从heartArr数组中删除
                        heartArr.splice(i, 1)
                    } else {
                        // 透明度没有变空之前，y轴上移、变大、透明度降低，
                        heartArr[i].y--;
                        heartArr[i].scale += .004;
                        heartArr[i].alpha -= .013;
                        var { x, y } = heartArr[i]
                        drawHeart(x, y, heartArr[i].scale, `rgba(${heartArr[i].color}, ${heartArr[i].alpha})`)
                    }
                }
                requestAnimationFrame(render)
            }

            function createHeart(e) {
                heartArr.push({
                    x: e.clientX, // 心的出现位置左上角坐标
                    y: e.clientY,
                    scale: 1, // 心的缩放大小
                    alpha: 1, // 心的透明度
                    color: getRandomColor() // 心的颜色
                });
            }

            // 设置心元素的样式
            function getRandomColor() {
                return `${~~(255 * Math.random())}, ${~~(255 * Math.random())}, ${~~(255 * Math.random())}`
            }

            global.onclick = (e) => {
                createHeart(e)
            }

            render()
        }(window, document);