JavaScript结合Canvas和WebGL可实现计算机图形学，从2D绘图到3D渲染。1. Canvas通过getContext('2d')支持基本图形与动画；2. WebGL调用GPU进行3D渲染，需掌握着色器、缓冲区和矩阵运算；3. 可实践Bresenham画线、光栅化、分形等算法；4. Three.js封装WebGL，简化3D场景构建与交互。
用JavaScript做计算机图形学，其实没那么遥远。现在很多浏览器都支持Canvas和WebGL，让前端也能高效处理图形渲染。重点是理解图形生成的基本原理，再结合JS的灵活性，就能做出不错的视觉效果。
Canvas基础绘图
Canvas是2D图形的起点。getContext('2d') 提供了绘制线条、形状、文字等方法。适合学习坐标变换、颜色填充、基本动画。
常见操作包括：- 清空画布用 clearRect()
- 画矩形用 fillRect() 或 strokeRect()
- 路径绘制靠 beginPath()、moveTo()、lineTo()、closePath()
- 颜色设置通过 fillStyle 和 strokeStyle
比如画一个旋转的三角形，只需要在动画循环中不断更新角度并重绘。
WebGL与3D渲染
真正进入计算机图形学核心，得靠WebGL。它是OpenGL ES的Web版本，直接调用GPU进行3D渲染。虽然API较底层，但能实现光照、纹理、模型变换等效果。
立即学习“Java免费学习笔记（深入）”；
关键概念有：- 顶点着色器和片元着色器（GLSL语言编写）
- 缓冲区存储顶点位置、颜色、法线等数据
- 矩阵运算处理平移、旋转、缩放（可用gl-matrix库）
- 逐帧渲染通过 requestAnimationFrame 实现
从绘制一个带颜色的立方体开始，逐步加入相机视角和灯光模型，就是3D引擎的基础。
图形算法实践
JavaScript也能实现经典图形学算法。比如Bresenham画线、扫描线填充、Bézier曲线生成，甚至光线追踪雏形。
可以尝试：- 在Canvas上实现一个简单的光栅化三角形
- 用递归或距离场绘制分形图形（如曼德博集合）
- 模拟阴影投射或简单物理碰撞
这些练习帮助理解像素级控制和数学建模的关系。
工具与扩展
不用从零造轮子。Three.js 是最流行的3D库，封装了WebGL复杂性，提供场景、相机、材质、灯光等高级抽象。
使用Three.js能快速实现：- 加载外部3D模型（glTF、OBJ）
- 添加后期处理效果（模糊、辉光）
- 响应用户交互（鼠标拖拽、缩放）
配合Tone.js或Web Audio API，还能做音画互动项目。
基本上就这些。JavaScript虽不是传统图形学首选语言，但胜在易上手、可视化反馈快。适合教学、原型开发和创意编码。掌握基础后，迁移到其他平台也更容易。
