这门课解决什么问题

很多前端开发者陷入一个困境：业务需求做多了，只会写 HTML 和 CSS，一旦涉及数据可视化或图形交互，就必须依赖 ECharts 等现成库，甚至需要彻底转行才能接触图形领域。本课程的核心价值，在于填补「应用层开发」与「图形渲染底层」之间的认知鸿沟。它不教你如何用库画一个饼图，而是从浏览器渲染原理出发，解析 Canvas、SVG 和 WebGL 三种图形实现方式的本质差异。无论你是想深入理解前端渲染机制，还是希望具备从零构建自定义可视化组件的能力，这门课都提供了一个系统性的解法。

适合什么基础，建议先看哪几块

课程对零基础并不友好，前置要求具备扎实的 JavaScript 基础，了解基本的 DOM 操作和异步编程。数学方面，只需具备高中水平的三角函数和向量概念即可，因为课程专门设有「数学篇」进行针对性补强。建议学习路径如下：首先完成「课前必学」，明确 Web 前端与可视化的边界；接着在「图形基础篇」中，重点对比指令式（Canvas）与声明式（SVG）绘图的适用场景，这是后续所有动手实践的地基；随后进入「数学篇」，务必亲手推导向量的点乘、叉乘以及参数方程，这是理解几何变换的钥匙；最后再根据兴趣选择 WebGL 进阶内容。

学完能独立做什么

完成学习后，你将能够脱离第三方图表库，独立实现复杂的自定义可视化图表。具体能力包括：使用 Canvas 绘制动态的层次关系图或手势密码解锁组件；利用 SVG 特性构建声明式的矢量图表；掌握基本的向量运算来处理多边形剖分和图形变换；若深入学习 WebGL 部分，还能触碰 GPU 渲染管线，绘制最基础的几何图形。这些能力不仅适用于数据大屏开发，更是通往图形学引擎、创意前端和高性能可视化的必经之路。

资料如何配合练习

课程提供的资料包并非简单的视频合集，而是包含了国庆策划等实战案例的代码脚手架。建议采用「听讲-读源码-手敲-调试」的闭环方式：先观看讲解，理解背后的渲染逻辑，再打开对应的源码文件，逐行阅读并注释关键算法；随后遮住代码，尝试独立复现核心功能，例如用原生 JS 实现一个手势解锁组件；最后在调试过程中，结合浏览器开发者工具观察 Canvas 的重绘过程或 SVG 的属性变化，将抽象的图形概念转化为具象的代码直觉。不要跳过数学篇直接看代码，否则后续的高级图形处理将面临理解障碍。

课程目录

国庆策划 (2讲)

  1. 国庆策划 _ 假期别闲着，一起来挑战“手势密码”
  2. 国庆策划 _ 快来看看怎么用原生JavaScript实现手势解锁组件

课前必学 (2讲)

  1. 开篇词 _ 不写网页的前端工程师，还能干什么？
  2. 预习 _ Web前端与可视化到底有什么区别？

图形基础篇 (4讲)

  1. 01 _ 浏览器中实现可视化的四种方式
  2. 02 _ 指令式绘图系统：如何用Canvas绘制层次关系图？
  3. 03 _ 声明式图形系统：如何用SVG图形元素绘制可视化图表？
  4. 04 _ GPU与渲染管线：如何用WebGL绘制最简单的几何图形？

数学篇 (5讲)

  1. 05 _ 如何用向量和坐标系描述点和线段？
  2. 06 _ 可视化中你必须要掌握的向量乘法知识
  3. 07 _ 如何用向量和参数方程描述曲线？
  4. 08 _ 如何利用三角剖分和向量操作描述并处理多边形？
  5. 09 _ 如何用仿射变换对几何图形进行坐标变换？

特别放送 (6讲)

  1. 加餐5｜周爱民：我想和你分享些学习的道理
  2. 加餐1 _ 作为一名程序员，数学到底要多好？
  3. 加餐2 _ SpriteJS：我是如何设计一个可视化图形渲染引擎的？
  4. 加餐3 _ 轻松一刻：我想和你聊聊前端的未来
  5. 加餐4 _ 一篇文章，带你快速理解函数式编程
  6. 用户故事 _ 非前端开发，我为什么要学可视化？

视觉基础篇 (8讲)

  1. 10 _ 图形系统如何表示颜色？
  2. 11｜图案生成：如何生成重复图案、分形图案以及随机效果？
  3. 12 _ 如何使用滤镜函数实现美颜效果？
  4. 13 _ 如何给简单的图案添加纹理和复杂滤镜？
  5. 14 _ 如何使用片元着色器进行几何造型？
  6. 15 _ 如何用极坐标系绘制有趣图案？
  7. 16 _ 如何使用噪声生成复杂的纹理？
  8. 17 _ 如何使用后期处理通道增强图像效果？

视觉高级篇 (10讲)

  1. 18 _ 如何生成简单动画让图形动起来？
  2. 19 _ 如何用着色器实现像素动画？
  3. 20 _ 如何用WebGL绘制3D物体？
  4. 21 _ 如何添加相机，用透视原理对物体进行投影？
  5. 22 _ 如何用仿射变换来移动和旋转3D物体？
  6. 23 _ 如何模拟光照让3D场景更逼真？（上）
  7. 24 _ 如何模拟光照让3D场景更逼真？（下）
  8. 25 _ 如何用法线贴图模拟真实物体表面
  9. 26 _ 如何绘制带宽度的曲线？
  10. 27 _ 案例：如何实现简单的3D可视化图表？

性能篇 (3讲)

  1. 28 _ Canvas、SVG与WebGL在性能上的优势与劣势
  2. 29 _ 怎么给Canvas绘制加速？
  3. 30｜怎么给WebGL绘制加速？

数据篇 (12讲)

  1. 31 _ 针对海量数据，如何优化性能？
  2. 32 _ 数据之美：如何选择合适的方法对数据进行可视化处理？
  3. 33 _ 数据处理（一）：可视化数据处理的一般方法是什么？
  4. 34 _ 数据处理（二）：如何处理多元变量？
  5. 35_ 设计（一）：如何让可视化设计更加清晰？
  6. 36 _ 设计（二）：如何理解可视化设计原则？
  7. 37 _ 实战（一）：如何使用图表库绘制常用数据图表？
  8. 38 _ 实战（二）：如何使用数据驱动框架绘制常用数据图表？
  9. 39 _ 实战（三）：如何实现地理信息的可视化？
  10. 40_ 实战（四）：如何实现3D地球可视化（上）？
  11. 41 _ 实战（五）：如何实现3D地球可视化（下）？
  12. 42 _ 如何整理出我们自己的可视化工具集？

结束语 (2讲)

  1. 有奖征集倒计时4天！你填写毕业问卷了吗？
  2. 结束语 _ 可视化工程师的未来之路