2020-08-19

最新推荐文章于 2023-09-27 19:22:28 发布

原创

最新推荐文章于 2023-09-27 19:22:28 发布 · 333 阅读

1 ·

CC 4.0 BY-SA版权

本文展示了如何在TypeScript与Vue结合的项目中，利用Canvas API创建一个动态的运动背景。通过代码示例，帮助读者学习实现此类效果的技术细节。

在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 = "ContentM