86. 模块十回顾与测验

知识回顾

模块十我们学习了两种网页绘图技术：Canvas 和 SVG。

Canvas 核心要点

• <canvas> 是画布元素，用 getContext('2d') 获取绘图上下文
• fillRect、strokeRect、clearRect 画矩形
• beginPath + moveTo + lineTo + fill/stroke 画任意路径
• arc 画圆和弧线，角度用弧度
• fillText 和 strokeText 绘制文字
• createLinearGradient 和 createRadialGradient 创建渐变
• translate、rotate、scale 进行坐标变换
• save / restore 保存和恢复状态
• globalCompositeOperation 控制图形合成模式

SVG 核心要点

• SVG 是矢量图，用 XML 标签描述图形
• rect、circle、ellipse、line、polygon 画基本形状
• path 最强大，用 d 属性描述任意路径
• 每个图形都是独立 DOM 节点
• 可以用 CSS 和 JavaScript 操控

Canvas vs SVG

对比项	Canvas	SVG
类型	位图	矢量图
操控方式	JavaScript	XML 标签
缩放	会失真	不失真
适合场景	游戏、像素操作	图标、图表

测验

1. 获取 Canvas 2D 绘图上下文的方法是？

A. canvas.getContext('2d') B. canvas.getContext('2D') C. canvas.createContext('2d') D. canvas.get2D()

答案：A

注意 '2d' 是小写。

2. Canvas 坐标系的 Y 轴方向是？

A. 向上递增 B. 向下递增 C. 向左递增 D. 没有固定方向

答案：B

Canvas 原点在左上角，Y 轴向下递增。

3. 以下哪个 SVG 元素可以画任意形状？

A. <rect> B. <circle> C. <path> D. <polygon>

答案：C

path 的 d 属性可以描述任意复杂的路径。

4. Canvas 中，rotate 方法使用什么单位？

A. 角度 B. 弧度 C. 百分比 D. 像素

答案：B

Canvas 的 rotate 使用弧度。Math.PI 等于 180 度。

5. 以下哪个场景更适合用 SVG？

A. 3D 游戏渲染 B. 照片滤镜处理 C. 网站 Logo D. 视频帧处理

答案：C

Logo 需要缩放不失真，SVG 是最佳选择。

下一章预告

模块十一我们将学习 Web 存储与离线技术。localStorage、sessionStorage、IndexedDB 这些浏览器端的存储方案，让你的网页在没有网络时也能工作。