janvas实现canvas文字雨代码雨动画效果代码-html代码-BFW代码库

janvas实现canvas文字雨代码雨动画效果代码

代码语言：html

所属分类：动画

代码描述：janvas实现canvas文字雨代码雨动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>



</head>

<body >
  <div id="app" style="width: 100%;height: 100%;"></div>

  
      <script  type="module">
/**
 * The Matrix Code Rain
 * Created by jarenchow based on janvas
 * https://github.com/jarenchow/janvas
 * https://github.com/jarenchow/janvasexamples
 */
import janvas from "https://cdn.skypack.dev/janvas@2.6.4";

var codeRain = new janvas.Canvas({
  container: "#app",
  interval: 50,
  props: {
    chars: [], // can define your own string array
    fontSize: 0, // can define your own preferred font size,
    colors: {
      background: "rgb(0, 0, 0)",
      head: "rgb(255, 255, 255)",
      tail: "rgb(0, 255, 0)",
      saturRange: [60, 90], // default: [60, 90], range: 0 ~ 100
      lightRange: [30, 40], // default: [30, 40], range: 0 ~ 100
      count: 3 // gradient count
    }
  },
  methods: {
    init: function () {
      this._initChars();
      this._initColors();
      this.fontSize = this.fontSize || Math.ceil(this.$width / 120);
      this.font = "bold " + this.fontSize + "px sans-serif";
      this.offsetY = janvas.Utils.measureTextWidth("M", this.font);
      this.halfY = this.offse.........完整代码请登录后点击上方下载按钮下载查看