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.offsetY / 2;
      this.background = new janvas.Rect(this.$ctx, 0, 0);
      this.background.getStyle().setFillStyle(this.colors.background);
      this.heads = [];
      this.pinMap = {};
      this.pinStack = [];
      this.serialIdIndex = 0;
    },
    resize: function () {
      var w = this.$width, h = this.$height;
      this.background.setWidth(w).setHeight(h);
      this.column = Math.floor(w / this.fontSize);
      this.count = Math.floor(this.column / 4);
      while (this.heads.length < this.count) {
        var x = this.getRandomX(), head = this.getDefaultText();
        head.init(x, -this.halfY, x, -this.halfY)
          .getMatrix().setOffsetY(-this.rand(h * 2));
        head.getStyle().setFillStyle(this.colors.head);
        head.timespan = this.rand(50, 100, true);
        head.timestamp = this.timestamp || 0;
        head.tails = new Array(Math.floor(head.timespan / 2) + 1);
        head.tails[0] = this.getDefaultText();
        for (var i = 1; i < head.tails.length; i++) {
          head.tails[i] = this.getDefaultText();
          head.tails[i].getStyle().setFillStyle(i < this.colors.count ?
            this.colors.gradient[i] : this.colors.tail);
        }
        this.heads.push(head);
      }
      this.heads.length = this.count;
    },
    update: function (timestamp) {
      this.timestamp = timestamp;
      this.heads.forEach(function (head) {
        if (timestamp >= head.timestamp) {
          head.timestamp += head.timespan;
       .........完整代码请登录后点击上方下载按钮下载查看