Canvas魔法之黑客帝国特效

逃离我推掉我的手 2024-04-23 21:06 60阅读 0赞

?作者主页：青花锁 ?简介：Java领域优质创作者?、Java微服务架构公号作者?

?简历模板、学习资料、面试题库、技术互助

?文末获取联系方式 ?

![在这里插入图片描述][8e79f79251004be596a5f46b79e5197a.png]

--------------------

## 往期热门专栏回顾 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">专栏</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Java项目实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12345409.html" rel="nofollow">介绍Java组件安装、使用；手写框架等</a></td> 
  </tr> 
  <tr> 
   <td align="left">Aws服务器实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12492968.html" rel="nofollow">Aws Linux服务器上操作nginx、git、JDK、Vue</a></td> 
  </tr> 
  <tr> 
   <td align="left">Java微服务实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12439818.html" rel="nofollow">Java 微服务实战，Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Java基础篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12369312.html" rel="nofollow">Java基础闲聊，已出HashMap、String、StringBuffer等源码分析，JVM分析，持续更新中 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Springboot篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12273537.html" rel="nofollow">从创建Springboot项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Spring MVC篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12295009.html" rel="nofollow">从创建Spring MVC项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回 </a></td> 
  </tr> 
  <tr> 
   <td align="left">华为云服务器实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12426609.html" rel="nofollow">华为云Linux服务器上操作nginx、git、JDK、Vue等，以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Java爬虫</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_8863085.html" rel="nofollow">通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Vue实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12278346.html" rel="nofollow">讲解Vue3的安装、环境配置，基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Spring</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12283629.html" rel="nofollow">讲解Spring(Bean)概念、IOC、AOP、集成jdbcTemplate/redis/事务等 </a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 前端小游戏专栏回顾 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">专栏</th> 
   <th align="left">导航</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">前端小游戏</td> 
   <td align="left">- -</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/article/details/136294836" rel="nofollow">Canvas魔法之黑客帝国特效</a></td> 
  </tr> 
  <tr> 
   <td align="left">前端小游戏</td> 
   <td align="left">- -</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/article/details/136299117" rel="nofollow">Canvas动画之豌豆射手</a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 前言 ##

今天我们实现黑客帝国（The Matrix）风格的字母掉落效果。  
使用工具：Chrome浏览器（或其他支持H5的浏览器）  
使用语言：HTML + JavaScript + Canvas + requestAnimationFrame  
![在这里插入图片描述][c13b7e002e8149f29d6947e680d5b4f8.png]

--------------------

## 相关知识点介绍 ##

HTML 、 JavaScript 、 Canvas 、 requestAnimationFrame

### HTML ###

HTML，全称为HyperText Markup Language（超文本标记语言），是一种用于创建网页的标准标记语言。它允许开发者通过使用一系列标签（tags）来结构化和格式化文本、图像、链接等内容，从而定义网页的结构和外观。HTML是构建网页和Web应用程序的基础，通常与CSS（层叠样式表）和JavaScript一起使用，以实现更加丰富和动态的网页效果。

--------------------

### JavaScript ###

JavaScript 是一种高级的、解释执行的编程语言，它是互联网上最广泛使用的脚本语言之一。JavaScript 允许开发者为网页添加交互性，比如响应用户的操作（如点击按钮、移动鼠标等）、操作网页内容、修改样式、发送异步请求等。

JavaScript 可以在几乎所有现代浏览器上运行，无论操作系统如何，这使得它成为跨平台开发的理想选择。

--------------------

### Canvas ###

Canvas 是 HTML5 标准中新增的一个元素，它提供了一个可以用来绘制图形的区域。通过 JavaScript，开发者可以在 Canvas 元素上绘制各种图形，如线条、形状、图像、文字等，并且可以实现动画效果。Canvas 是一个强大的工具，它使得在网页上创建复杂的图形和交互式动画成为可能。

Canvas 元素本身是一个空的容器，它需要通过 JavaScript 来绘制内容。开发者可以通过获取 Canvas 的 2D 渲染上下文（2D rendering context）来开始绘制。这个上下文提供了一系列的 API，允许开发者控制画布上的内容。

以下是一个简单的 HTML 和 JavaScript 示例，展示了如何在网页上创建一个 Canvas 元素并绘制一个简单的矩形：

<!DOCTYPE html>
    <html>
    <head>
        <title>Canvas 示例</title>
    </head>
    <body>
        <canvas id="myCanvas" width="200" height="100"></canvas>
        <script>
            // 获取 Canvas 元素
            var canvas = document.getElementById('myCanvas');
            // 获取 2D 渲染上下文
            var ctx = canvas.getContext('2d');
            // 设置填充颜色
            ctx.fillStyle = 'blue';
            // 绘制一个矩形
            ctx.fillRect(10, 10, 150, 50);
        </script>
    </body>
    </html>

在这个例子中，我们首先在 HTML 中创建了一个 Canvas 元素，并设置了它的宽度和高度。然后，我们使用 JavaScript 获取这个元素，并从它获取一个 2D 渲染上下文。接着，我们设置了填充颜色，并使用 fillRect 方法在 Canvas 上绘制了一个蓝色的矩形。

Canvas 也支持更复杂的图形绘制，如使用路径（paths）、贝塞尔曲线（Bézier curves）、渐变（gradients）、图案（patterns）等，以及图像处理功能，如图像的加载、缩放、裁剪等。此外，Canvas 还可以与 WebGL 技术结合，实现更加复杂的 3D 图形渲染。

--------------------

### requestAnimationFrame ###

requestAnimationFrame 是一个浏览器提供的 JavaScript 函数，它允许开发者请求浏览器在下次重绘之前（即在下一次页面刷新之前）调用一个回调函数来更新动画。这个函数是创建平滑动画的关键，因为它确保了动画的更新和页面的重绘同步，从而提高了性能并避免了不必要的重绘。

requestAnimationFrame 的基本用法如下：

// 定义一个更新动画的函数
    function updateAnimation(timestamp) {
        
        // 在这里执行动画的更新逻辑
        // ...
    
        // 请求下一次动画帧
        requestAnimationFrame(updateAnimation);
    }
    
    // 开始动画
    requestAnimationFrame(updateAnimation);

在这个例子中，updateAnimation 函数会在每次浏览器准备重绘时被调用。timestamp 参数是一个时间戳，表示当前动画帧的开始时间，可以用来计算动画的速度和时间间隔。

requestAnimationFrame 的优点包括：

*  性能优化：它比 setTimeout 或 setInterval 更高效，因为它只在浏览器需要重绘时才触发回调函数。
 *  平滑动画：由于与浏览器的重绘同步，动画看起来更加平滑。
 *  兼容性：现代浏览器都支持 requestAnimationFrame，它已经取代了旧的 setInterval 和 setTimeout 方法来更新动画。
 *  时间戳：提供了一个时间戳参数，这对于处理时间相关的动画非常有用。
 *  取消动画：如果需要停止动画，可以使用 cancelAnimationFrame 函数来取消之前请求的动画帧。

requestAnimationFrame 是创建复杂动画和游戏的关键工具，它使得开发者能够以一种简单、高效的方式处理动画和时间相关的任务。

--------------------

## 代码实战 ##

实现黑客帝国（The Matrix）风格的字母掉落效果可以通过创建一个Canvas元素，并在上面使用JavaScript来绘制随机字符，这些字符会像雨滴一样从顶部落下。

分为2部分，Html画布（Canvas元素容器）、JavaScript脚本控制字符像雨滴一样从顶部落下。

### Html画布 ###

首先是HTML代码，你需要在HTML文件中添加一个Canvas元素：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Matrix Effect</title>
    <style>
      body {
          
        margin: 0;
        overflow: hidden;
      }
      canvas {
          
        background: black;
      }
    </style>
    </head>
    <body>
    <canvas id="matrixCanvas"></canvas>
    <script src="matrix.js"></script>
    </body>
    </html>

--------------------

### 动画控制 ###

然后，是JavaScript代码，你可以将这部分代码保存为matrix.js文件：

// 获取Canvas元素并设置全屏
    const canvas = document.getElementById('matrixCanvas');
    const context = canvas.getContext('2d');
    
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    // 定义字符数组
    const katakana = 'アカサタナハマヤラワン';
    const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const nums = '0123456789';
    const matrixChars = katakana + latin + nums;
    
    // 定义字符大小
    const fontSize = 16;
    const columns = canvas.width / fontSize; // 计算列数
    
    // 每列的y位置
    const drops = [];
    for (let x = 0; x < columns; x++) {
        
      drops[x] = 1;
    }
    
    // 绘制Matrix效果的函数
    function drawMatrix() {
        
      // 添加半透明背景以产生尾迹效果
      context.fillStyle = 'rgba(0, 0, 0, 0.05)';
      context.fillRect(0, 0, canvas.width, canvas.height);
    
      // 设置文本颜色和字体
      context.fillStyle = '#0F0'; // 绿色文本
      context.font = fontSize + 'px monospace';
    
      // 循环遍历每一列
      for (let i = 0; i < drops.length; i++) {
        
        // 随机选择字符
        const text = matrixChars.charAt(Math.floor(Math.random() * matrixChars.length));
        // 绘制字符
        context.fillText(text, i * fontSize, drops[i] * fontSize);
        // 随机重置列的y位置以产生不同的效果
        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
        
          drops[i] = 0;
        }
        // 向下移动y位置
        drops[i]++;
      }
      // 循环调用函数
      requestAnimationFrame(drawMatrix);
    }
    
    // 调用函数以启动效果
    drawMatrix();

--------------------

## 讲解 ##

在上述代码中，我们首先设置了Canvas的大小，以覆盖整个浏览器窗口。然后，我们创建了一个字符数组，包括日文片假名、拉丁字母和数字，模仿了黑客帝国中的效果。我们还定义了每个字符的大小，并计算了Canvas宽度可以容纳的列数。

接着，我们创建了一个数组来跟踪每一列字符的当前y位置。在drawMatrix函数中，我们首先用半透明的黑色覆盖整个Canvas，以创建尾迹效果。然后，我们遍历每一列，随机选择一个字符并将其绘制在当前位置。如果字符移动到了Canvas的底部，我们会有小概率重置它的位置到顶部，以创建连续的掉落效果。最后，我们使用requestAnimationFrame来不断地重绘字符。

将这段代码保存到你的项目中，并确保matrix.js文件被正确引入HTML文件中。打开你的HTML文件，你就应该能看到黑客帝国风格的字母掉落效果了。

--------------------

资料获取，更多粉丝福利，关注下方公众号获取

![在这里插入图片描述][a74f7d5d03234f7c8a635562034442a0.gif_pic_center]

[8e79f79251004be596a5f46b79e5197a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/bf40399695bb40afa93907e1f669358a.png
[c13b7e002e8149f29d6947e680d5b4f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/eb4e587f0b874983b50da4e5b8ced52a.png
[a74f7d5d03234f7c8a635562034442a0.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/ca49964eda9748399063eb8aa249205c.gif