前端面试中Canvas常考知识点有哪些？

Canvas 常考知识点全面解析

在前端开发面试中,Canvas 作为 HTML5 的核心特性之一，常被用来考察候选人的图形渲染能力、性能优化意识以及 API 掌握程度，无论是绘制基础图形、实现动画效果，还是处理复杂的数据可视化，Canvas 都是高频考点，本文将梳理前端面试中 Canvas 的常考知识点，助你快速掌握核心要点，从容应对技术面试。

Canvas 基础概念与核心 API

Canvas 元素与上下文（Context）
- 如何通过 document.getElementById 或 querySelector 获取 Canvas 元素，并通过 getContext('2d') 获取 2D 渲染上下文。
- 理解 CanvasRenderingContext2D 对象的作用，它是所有绘图操作的核心接口。
基本绘图方法
- 绘制矩形：fillRect()、strokeRect()、clearRect()。
- 路径绘制：beginPath()、moveTo()、lineTo()、arc()、closePath()，以及 fill() 和 stroke() 的区别。
- 文本渲染：fillText() 和 strokeText()，以及字体样式设置（font、textAlign 等）。
样式与渐变
- 设置填充和描边样式：fillStyle 和 strokeStyle（支持颜色、渐变、图案）。
- 线性渐变（createLinearGradient()）和径向渐变（createRadialGradient()）的使用。

Canvas 高级特性与性能优化

图像处理与合成
- 绘制图像：drawImage() 的三种重载形式（缩放、裁剪）。
- 像素操作：通过 ImageData 对象和 putImageData()/getImageData() 实现像素级编辑（如滤镜效果）。
- 全局透明度（globalAlpha）和合成操作（globalCompositeOperation）的应用场景。
动画与帧率控制
- 使用 requestAnimationFrame 实现平滑动画，避免 setInterval 的性能问题。
- 清除画布的两种方式：clearRect() vs 重绘整个 Canvas（根据场景选择）。
离屏 Canvas 与性能优化
- 离屏 Canvas（OffscreenCanvas）的概念：在 Web Worker 中渲染，减少主线程压力。
- 减少重绘范围：通过脏矩形（Dirty Rectangle）技术优化复杂场景的渲染效率。

Canvas 与 SVG 的对比

面试中常被问及 Canvas 与 SVG 的区别，需明确以下要点：

渲染方式：Canvas 是像素级（即时模式）渲染，SVG 是矢量图形（保留模式）。
性能：Canvas 适合高频动态渲染（如游戏），SVG 适合静态或交互简单的图形（如图表）。
事件处理：SVG 元素天然支持 DOM 事件，Canvas 需手动实现像素检测或区域映射。

实战题与常见陷阱

手写代码题
- 绘制一个带阴影的圆形进度条。
- 实现图片的灰度滤镜效果（通过像素操作）。
常见错误与注意事项
- 忘记设置 Canvas 宽高（通过属性而非 CSS，否则会导致拉伸）。
- 未处理高 DPI 屏幕下的模糊问题（通过 window.devicePixelRatio 动态调整 Canvas 尺寸）。
- 内存泄漏：频繁创建/销毁 Image 对象或未释放离屏 Canvas 资源。