黑客效果-流动式数字或文字效果

加班是不可能的，除非双倍日工资

已于 2024-08-14 09:54:50 修改

阅读量174

点赞数 3

分类专栏：前端网页 canvas js 文章标签： javascript canva可画前端

于 2024-08-14 09:34:51 首次发布

本文链接：https://blog.csdn.net/weixin_45591772/article/details/141180424

版权

前端网页同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏

炫酷的黑客滚动效果怎么做?

其实没有想象中的那么难,要实现就一个canvas画布 + js 的事件以及数学逻辑,就可以实现,废话不多说先上效果图
在这里插入图片描述

html部分

<body>
  <canvas id="tutorial"></canvas>
  <script src="./下坠科技感.js"></script>
</body>

样式部分

  <style>
    canvas {
      position: fixed;
      top: 0;
      left: 0;
      background-color: black;
    }
  </style>

JS 主体部分

// 获取实例 ,设置画布
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
// 画布窗口大小设置 , devicePixelRatio是为了等比缩放保持清晰度
function init() {
  canvas.width = window.innerWidth * devicePixelRatio;
  canvas.height = window.innerHeight * devicePixelRatio;
}

init(); //打开画布

// 设置字体大小 字体
const fontSize = 15 * devicePixelRatio;
ctx.font = `${fontSize}px "微软雅黑"`;

// 获取有多少列
const colunmCount = Math.floor(canvas.width / fontSize);
// 
const charIndex = new Array(colunmCount).fill(0);

// 开始画
function draw() {
  ctx.fillStyle = 'rgba(0,0,0,0.1)'; // 遮罩层 淡出效果
  ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制一个填充的矩形 淡出效果
  ctx.fillStyle = '#00ff00'; //字体颜色
  ctx.textBaseline = 'top';
  ctx.textAlign = 'center';
  for (let i = 0; i < colunmCount; i++) {
    const text = generateRandomCharacter();
    const x = i * fontSize;
    const y = charIndex[i] * fontSize;
    ctx.fillText(text, x, y);  // 填充文本
    // 内容超出高度重置 ,未超出继续
    if (y > canvas.height && Math.random() > 0.99) {
      charIndex[i] = 0;
    } else {
      charIndex[i]++;
    }
  }
};

// 随机字符生成
function generateRandomCharacter() {
  // const characters = '123456789abcdefghijklmnopqrstuvwxyz'; // 可选的字符集合
  const characters = '01'; // 可选的字符集合
  const randomIndex = Math.floor(Math.random() * characters.length); // 生成随机索引
  return characters.charAt(randomIndex); // 返回随机字符
};
// 第一次执行
draw(); 
// 定时执行
setInterval(draw, 100);