2020-08-19

    在TypeScript + Vue项目中实现一个酷炫的Canvas运动背景，实现代码如下：

 

<template>
  <div id="main">
    <div id="bg-main">
      <canvas id="bg"></canvas>
    </div>
  </div>
</template>
​
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
​
let tick = 0,
    options = {
      len: 20,
      count: 50,
      baseTime: 10,
      addedTime: 10,
      dieChance: .01,
      spawnChance: .5,
      sparkChance: .1,
      sparkDist: 10,
      sparkSize: 2,
      color: `hsl(tone, 100%, light%)`,
      baseLight: 50,
      addedLight: 10,
      shadowToTimePropMult: 6,
      baseLightInputMultiplier: .01,
      addedLightInputMultiplier: .02,
      ox: 0,
      oy: 0,
      repaintAlpha: .04,
      toneChange: .1
    },
    lines = new Array(),
    dieX: number = 0,
    dieY: number = 0,
    clientHeight: number = 0,
    clientWidth: number = 0,
    baseRadius = Math.PI * 2 / 6
​
@Component
export default class Main extends Vue {
  name = "ContentMain"
​
  mounted(){
    const bg = document.