Canvas 2D 技术深度解析 - 教学大纲
本系列文档旨在系统性地讲解 HTML5 Canvas 2D 绑制技术，从基础概念到高级应用，帮助读者全面掌握 Web 2D 图形绑制能力。
📚 系列文档结构
Canvas2D基础/
├── 00-教学大纲与目录.md ← 当前文档
├── 01-Canvas元素与绑制环境.md ← 入门基础
├── 02-基础图形绑制.md ← 几何图形
├── 03-路径与贝塞尔曲线.md ← 路径系统
├── 04-样式与颜色系统.md ← 视觉效果
├── 05-变换与坐标系统.md ← 数学变换
├── 06-图像与像素操作.md ← 图像处理
├── 07-合成与混合模式.md ← 图层合成
├── 08-文本渲染.md ← 文字绘制
├── 09-动画与帧循环.md ← 动画系统
├── 10-离屏渲染与性能优化.md ← 性能调优
└── 11-实战案例与最佳实践.md ← 综合应用🎯 学习目标
完成本系列学习后，你将能够：
- 理解 Canvas 本质：掌握 Canvas 与 DOM、SVG、WebGL 的区别和适用场景
- 熟练基础绘图：使用 Canvas API 绑制各种几何图形和路径
- 掌握变换系统：理解坐标变换的数学原理并灵活应用
- 处理图像像素：进行图像绘制、像素读写和滤镜效果开发
- 实现流畅动画：使用 requestAnimationFrame 创建高性能动画
- 优化渲染性能：应用离屏渲染、脏矩形等优化策略
- 开发实际项目：具备开发画板、图表、游戏等应用的能力
📖 第一部分：基础入门篇
第1章：Canvas 元素与绘制环境
核心问题：如何创建和配置 Canvas 画布？Canvas 的坐标系统是怎样的？
内容要点：
1.1 Canvas 简介
- Canvas 的历史与发展
- Canvas vs SVG vs WebGL
- Canvas 的应用场景（游戏、图表、图像编辑）
- 浏览器兼容性
1.2 创建 Canvas 元素
- HTML 声明方式
- JavaScript 动态创建
- Canvas 尺寸设置（width/height 属性 vs CSS 样式）
- 回退内容（Fallback Content）
1.3 获取绑制上下文
getContext('2d')详解- CanvasRenderingContext2D 接口
- 上下文属性一览
- 检测 Canvas 支持
1.4 Canvas 坐标系统
- 坐标原点位置（左上角）
- X 轴和 Y 轴方向
- 像素坐标与物理像素
- 子像素渲染
1.5 高清屏（Retina）适配
- 设备像素比（devicePixelRatio）
- CSS 像素 vs 物理像素
- 高清屏适配方案
- 动态 DPR 处理
1.6 Canvas 状态管理
save()和restore()方法- 状态栈机制
- 可保存的状态列表
- 状态管理最佳实践
学习目标：掌握 Canvas 的基本使用方法和高清屏适配技术
代码示例：
javascript
// 高清屏适配
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
// 设置 Canvas 实际尺寸
canvas.width = 800 * dpr;
canvas.height = 600 * dpr;
// 设置 CSS 显示尺寸
canvas.style.width = '800px';
canvas.style.height = '600px';
// 缩放绑制上下文
ctx.scale(dpr, dpr);第2章：基础图形绑制
核心问题：如何使用 Canvas 绑制基本几何图形？
内容要点：
2.1 矩形绘制
fillRect(x, y, width, height)- 填充矩形strokeRect(x, y, width, height)- 描边矩形clearRect(x, y, width, height)- 清除矩形区域- 圆角矩形实现
2.2 圆与圆弧
arc(x, y, radius, startAngle, endAngle, counterclockwise)- 角度与弧度转换
arcTo(x1, y1, x2, y2, radius)- 切线圆弧- 绘制完整圆形
- 绘制扇形
2.3 直线与折线
moveTo(x, y)- 移动画笔lineTo(x, y)- 绘制直线- 连续折线绘制
- 线段端点连接
2.4 多边形绘制
- 三角形
- 正多边形（正五边形、正六边形等）
- 星形
- 任意多边形
2.5 填充与描边
fill()方法详解stroke()方法详解- 填充规则（nonzero、evenodd）
- 填充与描边的顺序
学习目标：熟练绘制各种基础几何图形
代码示例：
javascript
// 绘制正多边形
function drawPolygon(ctx, cx, cy, radius, sides) {
ctx.beginPath();
for (let i = 0; i < sides; i++) {
const angle = (i * 2 * Math.PI) / sides - Math.PI / 2;
const x = cx + radius * Math.cos(angle);
const y = cy + radius * Math.sin(angle);
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.closePath();
ctx.stroke();
}第3章：路径与贝塞尔曲线
核心问题：如何使用路径系统绘制复杂图形？贝塞尔曲线的原理是什么？
内容要点：
3.1 路径概念
- 什么是路径（Path）
beginPath()- 开始新路径closePath()- 闭合路径- 路径与子路径
- 路径绘制流程
3.2 Path2D 对象
- 创建 Path2D 对象
- 路径复用
- 路径合并
- SVG 路径字符串转换
- Path2D 的应用场景
3.3 二次贝塞尔曲线
quadraticCurveTo(cpx, cpy, x, y)- 控制点的作用
- 二次贝塞尔曲线数学公式：B(t) = (1-t)²P₀ + 2(1-t)tP₁ + t²P₂
- 曲线绘制示例
- 控制点可视化
3.4 三次贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)- 两个控制点的作用
- 三次贝塞尔曲线数学公式
- 与二次贝塞尔的区别
- S 形曲线绘制
3.5 曲线实际应用
- 平滑曲线连接多个点
- 圆角矩形的贝塞尔实现
- 波浪线效果
- 心形绘制
- 曲线编辑器实现思路
学习目标：理解路径系统和贝塞尔曲线的数学原理
代码示例：
javascript
// 三次贝塞尔曲线绘制 S 形
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.bezierCurveTo(50, 100, 150, 100, 150, 200);
ctx.bezierCurveTo(150, 300, 250, 300, 250, 200);
ctx.stroke();
// 使用 Path2D 复用路径
const heart = new Path2D();
heart.moveTo(75, 40);
heart.bezierCurveTo(75, 37, 70, 25, 50, 25);
heart.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
heart.bezierCurveTo(20, 80, 40, 102, 75, 120);
heart.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
heart.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
heart.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fill(heart);📖 第二部分：样式与变换篇
第4章：样式与颜色系统
核心问题：如何为图形添加丰富的样式效果？
内容要点：
4.1 颜色表示
- CSS 颜色名称
- 十六进制颜色（#RRGGBB、#RGB）
- RGB/RGBA 函数
- HSL/HSLA 函数
- 颜色透明度
4.2 线条样式
lineWidth- 线条宽度lineCap- 线端样式（butt、round、square）lineJoin- 线段连接样式（miter、round、bevel）miterLimit- 斜接限制- 线条样式示意图
4.3 虚线绘制
setLineDash([segments])- 设置虚线模式getLineDash()- 获取虚线模式lineDashOffset- 虚线偏移- 动态虚线动画（蚂蚁线效果）
4.4 渐变填充
createLinearGradient(x0, y0, x1, y1)- 线性渐变createRadialGradient(x0, y0, r0, x1, y1, r1)- 径向渐变createConicGradient(startAngle, x, y)- 锥形渐变addColorStop(offset, color)- 添加颜色停止点- 多色渐变效果
4.5 图案填充
createPattern(image, repetition)- 创建图案- 重复模式（repeat、repeat-x、repeat-y、no-repeat）
- 图案变换
- 动态图案
4.6 阴影效果
shadowColor- 阴影颜色shadowBlur- 阴影模糊度shadowOffsetX- 水平偏移shadowOffsetY- 垂直偏移- 阴影性能考量
学习目标：掌握 Canvas 的样式系统
代码示例：
javascript
// 创建线性渐变
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, '#ff0000');
gradient.addColorStop(0.5, '#00ff00');
gradient.addColorStop(1, '#0000ff');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 100);
// 蚂蚁线动画
let offset = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.setLineDash([4, 4]);
ctx.lineDashOffset = -offset;
ctx.strokeRect(10, 10, 100, 100);
offset++;
if (offset > 8) offset = 0;
requestAnimationFrame(animate);
}第5章：变换与坐标系统
核心问题：如何使用变换操作图形？变换矩阵的数学原理是什么？
内容要点：
5.1 平移变换
translate(x, y)方法- 坐标原点移动
- 平移的累积效果
- 平移矩阵表示
5.2 旋转变换
rotate(angle)方法- 角度与弧度：
radians = degrees * Math.PI / 180 - 旋转中心（默认原点）
- 绕任意点旋转的实现
- 旋转矩阵表示
5.3 缩放变换
scale(x, y)方法- 等比缩放与非等比缩放
- 负值缩放实现镜像
- 缩放矩阵表示
5.4 矩阵变换
transform(a, b, c, d, e, f)- 应用变换矩阵setTransform(a, b, c, d, e, f)- 重置并应用变换resetTransform()- 重置为单位矩阵- 6 参数含义详解
getTransform()- 获取当前变换矩阵
5.5 变换矩阵数学原理
- 2D 仿射变换矩阵（3×3）
- 齐次坐标
- 矩阵乘法与变换组合
- 逆变换计算
| a c e | | x | | ax + cy + e | | b d f | × | y | = | bx + dy + f | | 0 0 1 | | 1 | | 1 |5.6 变换组合与顺序
- 变换顺序的重要性
- 先旋转后平移 vs 先平移后旋转
- 复合变换的实现
- 常见变换陷阱
学习目标：理解变换的数学原理并灵活应用
代码示例：
javascript
// 绕任意点旋转
function rotateAroundPoint(ctx, x, y, angle) {
ctx.translate(x, y);
ctx.rotate(angle);
ctx.translate(-x, -y);
}
// 使用变换矩阵实现错切
function shear(ctx, shx, shy) {
// | 1 shx 0 |
// | shy 1 0 |
// | 0 0 1 |
ctx.transform(1, shy, shx, 1, 0, 0);
}
// 获取当前变换矩阵
const matrix = ctx.getTransform();
console.log(matrix); // DOMMatrix { a, b, c, d, e, f }📖 第三部分：图像与像素篇
第6章：图像与像素操作
核心问题：如何在 Canvas 中处理图像和操作像素？
内容要点：
6.1 绘制图像
drawImage(image, dx, dy)- 基本绘制drawImage(image, dx, dy, dw, dh)- 缩放绘制drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)- 裁剪绘制- 九参数详解与应用
- 图像平滑：
imageSmoothingEnabled
6.2 图像源类型
HTMLImageElement- Image 对象HTMLCanvasElement- 另一个 CanvasHTMLVideoElement- 视频帧ImageBitmap- 位图对象OffscreenCanvas- 离屏 Canvas- 图像加载与 onload 事件
6.3 ImageData 对象
createImageData(width, height)- 创建空白 ImageDatacreateImageData(imageData)- 复制尺寸- ImageData 结构：width、height、data
- RGBA 数据排列：
[R, G, B, A, R, G, B, A, ...] - 像素索引计算：
index = (y * width + x) * 4
6.4 像素读取
getImageData(sx, sy, sw, sh)- 读取像素数据- 跨域限制（Tainted Canvas）
- CORS 处理
- 性能考量
6.5 像素写入
putImageData(imageData, dx, dy)- 写入像素数据putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyW, dirtyH)- 部分写入- 脏矩形优化
6.6 像素操作实战
- 灰度化滤镜
- 反色效果
- 亮度/对比度调整
- 模糊效果（均值模糊、高斯模糊）
- 边缘检测（Sobel 算子）
- 马赛克效果
学习目标：掌握图像绘制和像素级操作
代码示例：
javascript
// 灰度化滤镜
function grayscale(ctx, x, y, width, height) {
const imageData = ctx.getImageData(x, y, width, height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
// 加权平均法
const gray = r * 0.299 + g * 0.587 + b * 0.114;
data[i] = data[i + 1] = data[i + 2] = gray;
}
ctx.putImageData(imageData, x, y);
}
// 边缘检测 (Sobel)
function sobelEdgeDetection(imageData) {
const width = imageData.width;
const height = imageData.height;
const data = imageData.data;
const output = new Uint8ClampedArray(data.length);
// Sobel 核
const sobelX = [-1, 0, 1, -2, 0, 2, -1, 0, 1];
const sobelY = [-1, -2, -1, 0, 0, 0, 1, 2, 1];
// ... 卷积计算
}第7章：合成与混合模式
核心问题：如何控制图形的叠加效果？
内容要点：
7.1 全局透明度
globalAlpha属性- 透明度范围：0.0（完全透明）到 1.0（完全不透明）
- 透明度叠加计算
- 与 RGBA 透明度的区别
7.2 合成操作概述
globalCompositeOperation属性- 源（Source）与目标（Destination）概念
- 26 种合成模式一览
7.3 基础合成模式
source-over- 默认模式，源覆盖目标source-in- 源与目标重叠部分，显示源source-out- 源与目标不重叠部分source-atop- 源在目标之上，只显示重叠部分destination-over- 目标覆盖源destination-in- 目标与源重叠部分，显示目标destination-out- 目标与源不重叠部分destination-atop- 目标在源之上
7.4 混合模式
lighter- 颜色叠加multiply- 正片叠底screen- 滤色overlay- 叠加darken- 变暗lighten- 变亮color-dodge- 颜色减淡color-burn- 颜色加深hard-light/soft-light- 强光/柔光difference/exclusion- 差值/排除
7.5 裁剪路径
clip()方法clip(path, fillRule)- 使用 Path2D- 填充规则：
nonzero、evenodd - 裁剪区域的叠加
- 重置裁剪区域（使用 save/restore）
7.6 合成实战应用
- 橡皮擦效果（destination-out）
- 遮罩效果（source-in）
- 刮刮卡效果
- 图像叠加效果
- 探照灯效果
学习目标：理解合成操作和混合模式
代码示例：
javascript
// 橡皮擦效果
canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(e.offsetX, e.offsetY, 20, 0, Math.PI * 2);
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
});
// 刮刮卡效果
function createScratchCard() {
// 绘制底层内容（奖品）
ctx.fillStyle = '#FFD700';
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = '#000';
ctx.font = '30px Arial';
ctx.fillText('恭喜中奖！', 80, 85);
// 绘制覆盖层
ctx.fillStyle = '#888';
ctx.fillRect(0, 0, 300, 150);
}📖 第四部分：文本与动画篇
第8章：文本渲染
核心问题：如何在 Canvas 中渲染高质量文本？
内容要点：
8.1 文本绘制
fillText(text, x, y, maxWidth)- 填充文本strokeText(text, x, y, maxWidth)- 描边文本- maxWidth 参数的作用
- 文本压缩行为
8.2 字体设置
font属性详解- CSS font 语法：
[style] [variant] [weight] [size]/[lineHeight] [family] - 常用字体设置示例
- Web 字体加载与检测
8.3 文本对齐
textAlign- 水平对齐start、end、left、right、center
textBaseline- 垂直基线top、hanging、middle、alphabetic、ideographic、bottom
- 对齐方式示意图
8.4 文本测量
measureText(text)方法- TextMetrics 对象属性
width- 文本宽度actualBoundingBoxLeft/Right- 实际边界fontBoundingBoxAscent/Descent- 字体边界actualBoundingBoxAscent/Descent- 实际边界
- 计算文本高度
8.5 多行文本
- Canvas 不支持自动换行
- 手动换行实现
- 自动换行算法
- 文本溢出处理（省略号）
8.6 文本特效
- 渐变文字
- 描边文字（空心字）
- 阴影文字
- 3D 立体文字效果
- 打字机动画效果
学习目标：掌握 Canvas 文本渲染技术
代码示例：
javascript
// 自动换行文本
function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
const words = text.split('');
let line = '';
let lines = [];
for (let i = 0; i < words.length; i++) {
const testLine = line + words[i];
const metrics = ctx.measureText(testLine);
if (metrics.width > maxWidth && i > 0) {
lines.push(line);
line = words[i];
} else {
line = testLine;
}
}
lines.push(line);
lines.forEach((line, index) => {
ctx.fillText(line, x, y + index * lineHeight);
});
}
// 渐变文字
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, '#ff0000');
gradient.addColorStop(1, '#0000ff');
ctx.font = '48px Arial';
ctx.fillStyle = gradient;
ctx.fillText('渐变文字', 50, 100);第9章：动画与帧循环
核心问题：如何实现流畅的 Canvas 动画？
内容要点：
9.1 动画原理
- 帧率（FPS）概念
- 视觉暂留效应
- 刷新率与帧率的关系
- 60 FPS 的意义
9.2 requestAnimationFrame
requestAnimationFrame(callback)用法- 与 setInterval/setTimeout 的区别
- 时间戳参数
cancelAnimationFrame(id)- 取消动画- 浏览器后台标签页行为
9.3 帧率控制
- 固定帧率实现
- 跳帧处理
- deltaTime 时间差
- 帧率无关的动画
9.4 缓动函数
- 线性缓动
- ease-in（加速）
- ease-out（减速）
- ease-in-out（先加速后减速）
- 贝塞尔缓动曲线
- 弹性缓动
javascript// 常用缓动函数 const easing = { linear: t => t, easeInQuad: t => t * t, easeOutQuad: t => t * (2 - t), easeInOutQuad: t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t, easeInCubic: t => t * t * t, easeOutCubic: t => (--t) * t * t + 1, };9.5 物理动画
- 速度与加速度
- 重力模拟
- 弹性效果
- 摩擦力
- 碰撞反弹
9.6 粒子系统
- 粒子属性（位置、速度、生命周期、颜色、大小）
- 粒子发射器
- 粒子更新与渲染
- 粒子池优化
- 常见粒子效果（烟花、火焰、雪花）
学习目标：掌握动画原理和实现技术
代码示例：
javascript
// 基础动画循环
let lastTime = 0;
function animate(currentTime) {
const deltaTime = currentTime - lastTime;
lastTime = currentTime;
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新状态
update(deltaTime);
// 绘制
render();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
// 粒子类
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = (Math.random() - 0.5) * 4;
this.vy = (Math.random() - 0.5) * 4;
this.life = 1;
this.decay = 0.01 + Math.random() * 0.02;
}
update() {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.1; // 重力
this.life -= this.decay;
}
draw(ctx) {
ctx.globalAlpha = this.life;
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
ctx.fill();
}
}📖 第五部分：性能与实战篇
第10章：离屏渲染与性能优化
核心问题：如何优化 Canvas 渲染性能？
内容要点：
10.1 离屏 Canvas
- 创建离屏 Canvas
- 离屏渲染的用途
- 双缓冲技术
- 预渲染静态内容
10.2 OffscreenCanvas
OffscreenCanvas构造函数- Web Worker 中使用 Canvas
transferControlToOffscreen()方法- 主线程与 Worker 通信
- 性能提升场景
10.3 脏矩形优化
- 脏矩形概念
- 脏区域计算
- 局部重绘实现
- 脏矩形合并策略
10.4 图层分离
- 多 Canvas 叠加技术
- 静态层与动态层分离
- 背景层、内容层、UI 层
- 图层管理策略
10.5 缓存策略
- 复杂图形缓存
- 缓存失效判断
- 缓存大小控制
- 缓存更新策略
10.6 性能监测与调优
- FPS 计算与显示
- Chrome DevTools Performance 面板
- 内存监测
- 常见性能瓶颈
- 性能检查清单
学习目标：掌握 Canvas 性能优化策略
代码示例：
javascript
// 离屏 Canvas 预渲染
const offscreen = document.createElement('canvas');
offscreen.width = 100;
offscreen.height = 100;
const offCtx = offscreen.getContext('2d');
// 预渲染复杂图形
offCtx.beginPath();
offCtx.arc(50, 50, 40, 0, Math.PI * 2);
offCtx.fill();
// 主 Canvas 中使用
function render() {
ctx.drawImage(offscreen, x, y);
}
// OffscreenCanvas in Worker
// main.js
const canvas = document.getElementById('canvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);
// worker.js
self.onmessage = function(e) {
const canvas = e.data.canvas;
const ctx = canvas.getContext('2d');
// 在 Worker 中绑制
};第11章：实战案例与最佳实践
核心问题：如何综合运用 Canvas 技术开发实际应用？
内容要点：
11.1 画板应用
- 画板架构设计
- 自由绑制实现
- 笔刷效果（铅笔、毛笔、喷枪）
- 撤销/重做功能
- 图层系统
- 导出图片
11.2 图表绘制
- 柱状图实现
- 折线图实现
- 饼图/环形图实现
- 坐标轴与刻度
- 数据标签
- 动画效果
- 交互功能（悬停、点击）
11.3 游戏开发基础
- 游戏循环
- 精灵（Sprite）系统
- 碰撞检测
- 键盘/鼠标输入
- 音效管理
- 简单游戏案例
11.4 图像编辑器
- 图像加载与显示
- 裁剪功能
- 滤镜效果
- 图层合成
- 历史记录
- 导出功能
11.5 数据可视化
- 大数据渲染策略
- 热力图实现
- 力导向图
- 地图可视化
- 实时数据更新
11.6 最佳实践总结
- 代码组织模式
- 模块化设计
- 常见问题与解决方案
- 性能检查清单
- 调试技巧
- 学习资源推荐
学习目标：通过实战案例巩固 Canvas 技术
代码示例：
javascript
// 简易画板
class DrawingBoard {
constructor(canvas) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.isDrawing = false;
this.lastX = 0;
this.lastY = 0;
this.bindEvents();
}
bindEvents() {
this.canvas.addEventListener('mousedown', (e) => {
this.isDrawing = true;
[this.lastX, this.lastY] = [e.offsetX, e.offsetY];
});
this.canvas.addEventListener('mousemove', (e) => {
if (!this.isDrawing) return;
this.ctx.beginPath();
this.ctx.moveTo(this.lastX, this.lastY);
this.ctx.lineTo(e.offsetX, e.offsetY);
this.ctx.stroke();
[this.lastX, this.lastY] = [e.offsetX, e.offsetY];
});
this.canvas.addEventListener('mouseup', () => {
this.isDrawing = false;
});
}
}📊 学习路线图
┌─────────────────────────────────────────────────────────────────────┐
│ Canvas 2D 学习路线 │
└─────────────────────────────────────────────────────────────────────┘
│
┌─────────────────────────┼─────────────────────────┐
│ │ │
▼ ▼ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐
│ 第1-3章 │ │ 第4-7章 │ │ 第8-11章│
│ 基础入门│ │ 样式图像│ │ 动画实战│
└─────────┘ └─────────┘ └─────────┘
│ │ │
▼ ▼ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐
│创建Canvas│ │颜色渐变 │ │动画循环 │
│基础图形 │ │变换矩阵 │ │性能优化 │
│路径曲线 │ │像素操作 │ │实战项目 │
└─────────┘ └─────────┘ └─────────┘
│ │ │
└─────────────────────────┴─────────────────────────┘
│
▼
┌─────────────────┐
│ 进阶：WebGL │
│ 进阶：PixiJS │
│ 进阶：无限画布 │
└─────────────────┘📚 参考资源
官方文档
推荐书籍
- 《HTML5 Canvas 核心技术》 - David Geary
- 《Canvas 高级编程》 - Rob Hawkes
在线工具
📝 编写状态
| 章节 | 状态 | 预计行数 |
|---|---|---|
| 00 - 教学大纲与目录 | ✅ 完成 | ~800 |
| 01 - Canvas元素与绑制环境 | ⏳ 待编写 | ~1,000 |
| 02 - 基础图形绘制 | ⏳ 待编写 | ~1,000 |
| 03 - 路径与贝塞尔曲线 | ⏳ 待编写 | ~1,200 |
| 04 - 样式与颜色系统 | ⏳ 待编写 | ~1,000 |
| 05 - 变换与坐标系统 | ⏳ 待编写 | ~1,200 |
| 06 - 图像与像素操作 | ⏳ 待编写 | ~1,200 |
| 07 - 合成与混合模式 | ⏳ 待编写 | ~1,000 |
| 08 - 文本渲染 | ⏳ 待编写 | ~900 |
| 09 - 动画与帧循环 | ⏳ 待编写 | ~1,200 |
| 10 - 离屏渲染与性能优化 | ⏳ 待编写 | ~1,100 |
| 11 - 实战案例与最佳实践 | ⏳ 待编写 | ~1,200 |
文档版本：v1.0
创建日期：2026-01-28
系列定位：Web 2D 图形绘制入门教程