【Canvas真好玩】从黑客帝国开始
- 2019 年 11 月 13 日
- 筆記
前言
笔者之前有一段时间一直在学习Canvas相关的技术知识点，通过参考网上的一些资料文章，学着利用简单的数学和物理知识点实现了一些比较有趣的动画效果，最近刚好翻看到以前的代码，所以这次将这些代码实践重新梳理一遍后整理成文，自己巩固复习的同时，可以和大家一起交流学习。作为【Canvas真好玩】系列的第一篇文章，笔者还是从最经典的黑客帝国开始，在一步一步进行代码具体实践的同时，带领大家进入神奇的Canvas动画的世界。
代码已上传至Github，可以拉下来后直接运行，省掉下面的准备工作环节。
效果图
准备工作
因为之前的代码比较久远，这次打算使用React来重构一遍，还是使用目前使用频率比较高的create-react-app脚手架来搭建项目，在本地找到合适的项目路径，然后执行项目初始化命令：
npm install -g create-react-app create-react-app react-canvas考虑到后期可能会有一系列的动画效果，所以为了界面美观以及方便管理，这里直接简单使用下React Ant Design来管理动画菜单方便切换到不同的动画，使用react-router-dom来控制路由，同时使用loadable来对路由实现按需加载：
npm install --save antd react-router-dom @loadable/component // 以下依赖遵循antd官网的高级配置，使用babel-plugin-import实现组件代码和样式的按需加载 npm install --save-dev react-app-rewired customize-cra babel-plugin-import安装完成之后修改package.json文件：
/* package.json */ "scripts": { - "start": "react-scripts start", + "start": "react-app-rewired start", - "build": "react-scripts build", + "build": "react-app-rewired build", - "test": "react-scripts test", + "test": "react-app-rewired test", - "eject": "react-scripts eject", + "eject": "react-app-rewired eject", }然后在项目根目录创建一个 config-overrides.js 用于修改默认配置：
+ const { override, fixBabelImports } = require('customize-cra'); + module.exports = override( + fixBabelImports('import', { + libraryName: 'antd', + libraryDirectory: 'es', + style: 'css', + }), + );到目前为止，项目的目录结构如下：
├── node_modules ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js ├── .gitignore ├── config-overrides.js ├── package.json ├── package-lock.json └── README.mdsrc目录下有一些在当前项目中不太需要的文件，可以将其删除，然后在src目录下创建router目录用于存放项目路由，views目录用于存放不同路由下的页面，通过antd的Layout组件来实现页面布局，修改后的代码如下：
// src -> router -> index.js import loadable from '@loadable/component'; const routes = [ { path: '/hacker', name: '黑客帝国', component: loadable(() => import(/* webpackChunkName: 'hacker' */ '../views/Hacker')), } ]; export default routes;// src -> views -> Hacker.js function Hacker() { const canvasRef = useRef(null); return ( <canvas ref={canvasRef} style={{background: '#000'}}/> ); } export default Hacker;// src -> App.js import React, {useState} from 'react'; import {Redirect, Route, NavLink, Switch, withRouter} from 'react-router-dom'; import {Layout, Menu, Icon} from 'antd'; import routes from './router'; import './App.css'; const {Header, Sider, Content} = Layout; function App({location}) { const [collapsed, setCollapsed] = useState(false); const toggle = () => setCollapsed(!collapsed); return ( <Layout> <Sider trigger={null} collapsible collapsed={collapsed}> <div className="title">Canvas真好玩</div> <Menu theme="dark" mode="inline" defaultSelectedKeys={[location.pathname.length === 1 ? routes[0].path : location.pathname]}> { routes.map(route => <Menu.Item key={route.path}> <NavLink to={route.path} style={{color: 'rgba(255,255,255,.65)'}} activeStyle={{color: '#fff'}} > {route.name} </NavLink> </Menu.Item>) } </Menu> </Sider> <Layout> <Header style={{background: '#fff', padding: 0}}> <Icon className="trigger" type={collapsed ? 'menu-unfold' : 'menu-fold'} onClick={toggle} /> </Header> <Content style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280, }} > <Switch> { routes.map((route, i) => <Route path={route.path} exact={route.exact} render={props => <route.component {...props} router={route.routes}/>} key={i} /> ) } <Redirect from="/" to="/hacker" exact={true}/> </Switch> </Content> </Layout> </Layout> ); } export default withRouter(App);// src -> index.js import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter as Router} from 'react-router-dom'; import './index.css'; import App from './App'; ReactDOM.render( <Router> <App/> </Router>, document.getElementById('root'));// src -> App.css #root { height: 100%; } .ant-layout { height: 100%; } .title { padding: 16px 0; text-align: center; color: #fff; font-size: 24px; background-color: rgba(0, 0, 0, .2); } .trigger { font-size: 18px; line-height: 64px; padding: 0 24px; cursor: pointer; transition: color 0.3s; } .trigger:hover { color: #1890ff; } .logo { height: 32px; background: rgba(255, 255, 255, 0.2); margin: 16px; }至此，我们项目的基本代码结构就已经书写完毕，这里先贴一张我目前已经完成的页面效果：
其实也没有那么好看，主要是为了方便管理菜单，接下来我们就来一步一步分析实现页面中炫酷的黑客帝国效果吧。
实现
在代码实践之前，我们先来分析一下黑客帝国的实现细节，在上面的动画效果中，我们可以知道，动画其实就是由各种英文字母，数字以及特殊符号实现的一个从上到下的距离偏移效果，所以我们在代码中会维护一个集合用于存放所有可能出现的文字。其次，我们可以看出，文字的下坠效果其实是分成了多列的，当然列数会根据Canvas容器的宽度来动态计算。为了实现动画，我们这里可以借助浏览器的requestAnimationFrame来保持每秒60帧的流畅度，相信大部分前端人员对这个Api已经不陌生了，不过这里需要注意以下两点：
- 若想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用requestAnimationFrame()
- 为了提高性能和电池寿命，因此在大多数浏览器里，当requestAnimationFrame() 运行在后台标签页或者隐藏的iframe里时，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命
通过这个动画Api我们就可以在每帧的时间内清空当前的Canvas容器状态，同时计算每个文字的新坐标并进行绘制，我们可以为每列文字的Y轴偏移定义一个初始变量为1，即表示一个字体单位的大小，每次当文字下落一个字体大小的时候，将这个初始变量加1，这样在下次计算文字坐标的时候，就可以将这个值乘以字体大小从而得出Y轴的坐标，这样在视觉上就达到了一个文字的下坠效果。这里需要提一下的是，Canvas的坐标系统和理科领域的笛卡尔坐标系有点不太一样，采用默认的窗口坐标系统，即原点坐标位于窗口的左上角，沿X轴方向向右为正值，沿Y轴方向向下为正值，在后续计算文字坐标的时候需要注意这里的区别，其实窗口坐标系统中也是有负值的，只是跑到了屏幕之外，我们一般没有注意到而已。
笛卡尔坐标系：
窗口坐标系：
关于Canvas其他的知识点和基础API不是本系列的重点，感兴趣的同学可以自行网上查阅下相关资料，Canvas的绘图API也不是很多，学习门槛不高，很好掌握。基于以上的分析，我们尝试完善一下Hacker.js中的代码：
function Hacker() { const canvasRef = useRef(null); useEffect(() => { // 获取当前的canvas元素 const canvas = canvasRef.current; // 获取canvas上下文，2d表示建立一个二维渲染上下文，当然也有基于WebGL的三维渲染上下文，在本系列中暂不考虑 const context = canvas.getContext('2d'); // 临时保存canvas的宽高信息，问了简便固定800 x 600 const w = canvas.width = 800; const h = canvas.height = 600; // 文字颜色 const textColor = '#33ff33'; // 保存所有可能出现的文字 const words = "0123456789qwertyuiopasdfghjklzxcvbnm,./;'[]QWERTYUIOP{}ASDFGHJHJKL:ZXCVBBNM<>?"; // 将文字拆分进一个数组 const wordsArr = words.split(''); // 这里假设每个文字的字体大小为16px const font_size = 16; // 根据字体大小动态计算文字列数 const columns = w / font_size; // 根据上面的分析，我们创建一个数组保存每列中的文字当前在Y轴上偏移了几个字体单位 const dropUnits = []; // 初始化dropUnits，默认值从1开始，而不是0，因为canvas的fillText方法默认是从文字的左下角开始绘制 for (let i = 0; i < columns; i++) { dropUnits[i] = 1; } // 设置上下文的填充色和字体大小 context.fillStyle = textColor; context.font = `${font_size}px arial`; function draw() { // 核心， // 这里开始循环每一列， // 为每一列创建随机文字， // 同时根据当前列已经下落了几个字体大小来设置文字坐标(坐标原点为canvas容器的左上角) for (let i = 0, len = dropUnits.length; i < len; i++) { const text = wordsArr[Math.floor(Math.random() * wordsArr.length)]; const x = i * font_size; const y = dropUnits[i] * font_size; context.fillText(text, x, y); // 当文字已经超出高度边界的时候，需要重置当前列下落的字体单位 if (y > h) { dropUnits[i] = 0; } dropUnits[i]++; } } // 循环执行动画 (function frame() { // 此处需要再次调用requestAnimationFrame，注意并不是同步递归 window.requestAnimationFrame(frame); // 在绘制下一帧的文字之前需要清空当前状态下的所有文字，避免文字被覆盖 context.clearRect(0, 0, w, h); draw(); }()); }, []); return ( <canvas ref={canvasRef} style={{background: '#000'}}/> ); }添加以上代码之后，我们来看看目前的效果：
这个效果并不是我们理想中的样子，我们分析一下问题出现的原因，在以上代码实现中，draw函数用于绘制文字，如果检测到文字当前已经超出容器范围，则会重置dropUnits数组中的值为0，那么导致的后果就是，dropUnits数组中的每一项都为0，所以每列文字的Y轴起始坐标始终都是相同的，也就造成上面的效果。所以我们只需要想办法让Y轴的起始坐标错开，那么也就达到了预期的效果了，当然这种错开也是随机的，所以就很容易想到使用Math.random方法增加随机数判断来实现了，我们对以上代码稍作一下修改：
- if (y > h) { + if (y > h && Math.random() > 0.98) { // 此处增加随机数判断，只有满足条件后才进行重置 dropUnits[i] = 0; }我简单画了张图来帮助理解一下这个过程，图中两个方块代表两个文字，布尔值代表上面代码中if条件的结果：
上图中可以清楚地看到新增了随机数之后，文字的Y轴坐标产生了差异，修改后的效果如下：
离预期的效果越来越近了，但是这个效果看起来有点生硬，因为我们在每一帧中绘制文字之前，会使用Canvas的clearRect方法将Canvas画布进行清除，所以文字会瞬间出现在下一个坐标点中，形成这种闪烁效果，类似于马路上的红绿灯，在切换颜色之前会将之前的颜色清空，然后瞬间切换。这里我们换一种思路，我们不使用clearRect方法来清除画布，而是在每一帧中使用fillRect方法为画布填充一层淡淡的背景色，以此来实现渐变效果，我们来对代码稍作修改：
// 文字颜色 const textColor = '#33ff33'; + // 填充背景色 + const bgColor = 'rgba(0, 0, 0, .1)'; - // 设置上下文的填充色和字体大小 - context.fillStyle = textColor; - context.font = font_size + 'px arial'; function draw() { // 将上述两行代码放到此函数中，因为这里需要重新设置fillStyle + context.fillStyle = textColor; + context.font = font_size + 'px arial'; } // 循环执行动画 (function frame() { ... - // 在绘制下一帧的文字之前需要清空当前状态下的所有文字，避免文字被覆盖 - context.clearRect(0, 0, w, h); + // 在绘制下一帧的文字之前给画布填充背景色 + context.fillStyle = bgColor; + context.fillRect(0, 0, w, h); ... }());代码修改完毕后赶紧看下效果吧，应该就和本文开头的效果图一样了，至此，就已经使用Canvas完整地实现了黑客帝国效果，还不错吧。
总结
本文主要是跟大家分享一下使用Canvas来实现炫酷的黑客帝国效果，当然这只是本系列的开篇，后续还会结合简单的数学和物理知识来实现更加有趣的动画效果，希望能和大家一起相互讨论，互相学习。
交流
今天先分享到这里，如果大家对Canvas的动画比较感兴趣，可以关注咱们的公众号，一起交流学习。
文章已同步更新至Github博客，若觉文章尚可，欢迎前往star！
你的一个点赞，值得让我付出更多的努力！
逆境中成长，只有不断地学习，才能成为更好的自己，与君共勉！
