TypeScript + Vue 实现某个canvas科幻背景 -- 1

最新推荐文章于 2024-07-29 17:09:37 发布

我开始方了

最新推荐文章于 2024-07-29 17:09:37 发布

阅读量3.7k

点赞数

文章标签： typescript vue canvas

本文链接：https://blog.csdn.net/u013843183/article/details/80569145

版权

在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.