Canvas、SVG 与图形渲染

共 23 题
#

1. WebGL 的 Uniform Buffer Object 与 Transform Feedback 在批量渲染的取舍

A UBO 按 std140 布局打包 uniform,可减少状态切换 ✓ 正确答案
B Transform Feedback 把数据从 GPU 回读到 CPU 再上传
C UBO 与 Transform Feedback 完全互斥
D 批量渲染只能使用立即模式
#

2. HTMLCanvasElement.toBlob 的 quality/type 参数在截图上传的现代取舍

A webp 在体积与质量平衡上常优于 jpeg,且 toBlob 前需确认 canvas 未被污染 ✓ 正确答案
B quality 参数对 png 格式生效
C toBlob 是同步接口
D toDataURL 生成的 base64 比 Blob 更省内存
#

3. WebGL 扩展(OES_texture_float、EXT_color_buffer_float)

A WebGL 扩展会自动全部启用
B 扩展不支持时 WebGL 会崩溃
C 浮点纹理在所有设备都支持线性滤波
D OES_texture_float 提供浮点纹理,EXT_color_buffer_float 允许浮点渲染目标,需 getExtension 启用并做能力检测 ✓ 正确答案
#

4. Canvas 2D、SVG 与 WebGL/WebGPU 的渲染模型差异

A SVG 是立即模式,每次变化需手动重绘
B WebGL 比 SVG 更易实现简单图标
C Canvas 内容可被屏幕阅读器读取
D SVG 保留场景图、天然支持命中测试与无障碍,Canvas 是位图立即模式,WebGL 是 GPU 可编程管线 ✓ 正确答案
#

5. Canvas 立即模式与 SVG 保留模式的命中测试、内存与可访问性

A Canvas 保留每个图形对象供命中测试
B Canvas 输出天然可被屏幕阅读器朗读
C SVG 的元素数量不影响内存
D SVG 由浏览器按元素自动命中且可被辅助技术读取,Canvas 需自行实现命中测试与无障碍补偿 ✓ 正确答案
#

6. WebGL 上下文丢失(webglcontextlost/webglcontextrestored)的资源重建策略

A 上下文丢失后 GPU 资源仍然有效
B 恢复后无需重设视口
C 上下文丢失只发生在旧浏览器
D 在 webglcontextlost 中 preventDefault 可支持恢复,restored 后需重建全部 GL 资源 ✓ 正确答案
#

7. Canvas 离屏渲染(OffscreenCanvas + transferControlToOffscreen)

A transferControlToOffscreen 把画布控制权交给 Worker,配合 ImageBitmap 位块传输可把渲染移出主线程 ✓ 正确答案
B OffscreenCanvas 只能在主线程使用
C transferControlToOffscreen 后主线程仍可继续绘制同一 canvas
D Worker 与主线程共享 WebGL 纹理
#

8. WebGL2 与 WebGPU 在 2D 渲染与图像处理管线的能力差异

A WebGL2 支持计算着色器
B WebGPU 与 WebGL2 完全等价
C WebGPU 以 Pipeline 与 BindGroup 组织渲染,支持计算着色器与显式资源管理,表达力强于 WebGL2 ✓ 正确答案
D WebGL2 无法进行图像处理
#

9. OffscreenCanvas + Worker 的并行渲染限制

A Worker 创建的 WebGL 上下文可被主线程直接使用
B OffscreenCanvas 渲染结果需通过 ImageBitmap 位块传输回主线程,且存在通信与资源开销 ✓ 正确答案
C Worker 中可以访问完整 DOM API
D 任意数量的 OffscreenCanvas 都无资源限制
#

10. SVG Symbol、<use> 与 CSS 集成的复用模式

A <use> 每次引用都会复制图形定义
B sprite 中的 symbol 必须可见
C <use> 实例的样式无法被 CSS 影响
D symbol 定义一次、use 多处实例化,可用 currentColor 与 CSS 变量主题化 ✓ 正确答案
#

11. WebGL 资源(Buffer、Texture、Framebuffer)

A WebGL 资源会被垃圾回收自动释放
B 纹理无需绑定即可使用
C usage 参数对性能没有影响
D Buffer/Texture/Framebuffer 需通过 delete* API 显式释放,并配合资源池管理显存 ✓ 正确答案
#

12. WebGPU 与 WebGL 在着色器语言、计算管线与多线程上的代际差距

A WebGL 原生支持计算着色器
B WebGL 支持多队列并行提交
C WebGPU 的着色器语言与 GLSL 完全一致
D WebGPU 用 WGSL、原生计算管线与显式同步,在计算与多线程上代际领先 WebGL ✓ 正确答案
#

13. HTML5 <canvas> 元素的 2D 与 WebGL 上下文在大型图表渲染时的 GPU 加速差异

A 大型实时图表中 WebGL 通过合并绘制调用与 GPU 管线获得更高性能,中小图表用 Canvas 2D/SVG 更合适 ✓ 正确答案
B Canvas 2D 与 WebGL 的绘制性能完全相同
C WebGL 图表无需处理 DPR
D Canvas 2D 无法绘制动画
#

14. WebGL 着色器(GLSL)在跨平台兼容性、调试与降级到软件渲染的工程挑战

A 着色器调试依赖日志与可视化输出,且 WebGL 不可用时应降级到 Canvas 2D 或静态图 ✓ 正确答案
B GLSL 在所有设备上精度一致
C 浏览器可以强制启用软件渲染
D uniform 数量没有上限
#

15. Canvas 2D 上下文 willReadFrequently 属性在频繁读写像素时的性能取舍

A willReadFrequently 会提升所有 Canvas 操作的性能
B getImageData 在任何配置下成本相同
C willReadFrequently 提示浏览器优先 CPU 可读存储以加速 getImageData,但会牺牲 GPU 合成性能 ✓ 正确答案
D 该选项在所有浏览器都强制生效
#

16. <svg> 内联 SVG 在样式继承、CSS 动画与可访问性(<title>、<desc>)的取舍

A 外链 SVG 与内联 SVG 的 CSS 控制能力相同
B 内联 SVG 无法做 CSS 动画
C 内联 SVG 可被 CSS 控制并可加 title/desc 提升可访问性,但会增加 HTML 体积 ✓ 正确答案
D 纯装饰 SVG 不需要 aria-hidden
#

17. Web Animations API 在 Canvas 与 SVG 元素动画的统一控制能力

A WAAPI 可以直接动画 Canvas 位图像素
B WAAPI 统一 CSS 与 SVG 元素动画控制,Canvas 需在 rAF 中读取动画时间驱动绘制 ✓ 正确答案
C WAAPI 与 CSS 动画是两套互不相通的体系
D SMIL 与 WAAPI 完全等价
#

18. crossorigin 属性在 <img> 与 Canvas 污染(taint)跨域场景的处理

A 跨域图片绘制到 canvas 后总能读取像素
B crossorigin 可以在设置 src 之后再添加
C img 加 crossorigin 且服务端返回 CORS 头,画布才不会被污染并可安全读取像素 ✓ 正确答案
D 视频帧不受 taint 机制约束
#

19. Canvas 与 WebGL 在 1px 模糊、HiDPI 渲染与设备像素比适配的常见坑

A 设置 canvas.width 等于 CSS 宽度即可避免模糊
B 1px 模糊与 dpr 无关
C WebGL 不需要关心 dpr
D HiDPI 下应把画布物理尺寸乘以 dpr 并缩放上下文,绘制时对齐像素网格避免模糊 ✓ 正确答案
#

20. Canvas 2D Path2D 对象在 SVG 路径解析复用与渲染性能的应用

A Path2D 可从 SVG path 字符串构造并复用,配合 isPointInPath 做命中测试 ✓ 正确答案
B Path2D 只能由路径指令数组构造
C Path2D 会自动 GPU 加速所有绘制
D Path2D 每次绘制都会重新解析路径
#

21. Canvas 的绘图状态管理,save/restore 与变换矩阵?

A restore() 只恢复变换矩阵
B setTransform 是在现有矩阵上叠加
C 变换矩阵不参与状态栈
D save/restore 成对使用可隔离样式与变换,变换组合顺序会影响最终结果 ✓ 正确答案
#

22. SVG 与 Canvas 的选型,矢量 vs 位图、交互与性能?

A SVG 与 Canvas 都保留图形对象
B 高交互小数量选 SVG,高频更新海量图形选 Canvas,可按层混合使用 ✓ 正确答案
C SVG 渲染成本与节点数无关
D Canvas 适合任意缩放不失真的场景
#

23. Canvas 的高分屏适配,devicePixelRatio 与缩放?

A 高分屏适配只需增大 CSS 尺寸
B 画布物理尺寸乘 dpr 并缩放上下文,且需处理 dpr 动态变化与内存成本 ✓ 正确答案
C dpr 只影响 Canvas 不影响文字
D devicePixelRatio 永远是整数