在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.getElementById('bg') as HTMLCanvasElement,
bgMain = document.getElementById('bg-main') as HTMLDivElement
let ctx = bg.