前言

笔者之前有一段时间一直在学习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.md

src目录下有一些在当前项目中不太需要的文件，可以将其删除，然后在src目录下创建router目录用于存放项目路由，views目录用于存放不同路由下的页面，通过antd的