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

代码语言：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;
          var tails = head.tails, last = tails[tails.length - 1];
          if (this.inBackground(last)) { // 新增 pin 以绘制拖尾效果
            var pin = this.pinStack.pop() || this.getDefaultText();
            this.setTextConfig(pin, last.getStartX(), last.getStartY(),
              last.getText(), last.getMatrix());
            pin.getStyle().setFillStyle(last.getStyle().getFillStyle());
            pin.alpha = 255;
            pin.decre = last.decre;
            this.pinMap[pin.serialId] = pin;
          }
          var mat = head.getMatrix(), y = head.getStartY() + mat.getOffsetY();
          this.setTextConfig(tails[0], head.getStartX(), y, head.getText(), mat);
          head.setText(this.getRandomChar()); // 将 head 的属性设置给 tails[0] 并变动 head
          mat.setScale(janvas.Utils.randSign(), janvas.Utils.randSign())
            .setOffsetY(mat.getOffsetY() + this.offsetY);
          for (var i = tails.length - 1; i > 0; i--) {
            var next = tails[i], prev = tails[i - 1];
            this.setTextConfig(next, prev.getStartX(), prev.getStartY(),
              Math.random() < 0.1 ? this.getRandomChar() : prev.getText(),
              prev.getMatrix()); // 将更靠近头部的前者属性设置给后者
            if (i > this.colors.count) { // 将更靠近头部的前者的颜色设置给后者
              next.getStyle().setFillStyle(prev.getStyle().getFillStyle());
              next.decre = prev.decre;
            }
          }
          var range = this.colors.lightRange[1] - this.colors.lightRange[0],
            rand.........完整代码请登录后点击上方下载按钮下载查看