Canvas 高频面试题及详细答案（实战向）.docxVIP

Canvas高频面试题及详细答案（实战向）

一、基础认知类

1.简单说说你对Canvas的理解，它的本质是什么？

Canvas是HTML5提供的位图绘图标签，核心是通过JavaScript脚本在网页上实时绘制图形、图像、动画、文字等内容。

它的本质是一个像素画布，默认是透明的位图区域，所有绘图操作都是基于像素点进行渲染。画布本身只是一个空容器，没有任何绘图能力，所有绘制逻辑、样式、图形计算都需要通过JS调用2D上下文API实现。

和普通DOM不同，Canvas内部没有独立DOM节点，绘制的图形不会生成标签，无法单独绑定事件，所有交互都需要通过坐标计算实现。

2.Canvas与SVG的核心区别是什么？项目中如何选择？

这是前端高频对比考点，核心差异集中在渲染机制、性能、特性三个维度：

核心区别：

渲染机制：Canvas是位图渲染，基于像素绘制，一次绘制完成后图形独立无层级；SVG是矢量图渲染，基于XML标签绘制，每个图形都是独立DOM节点。

缩放效果：Canvas放大后会出现像素模糊、锯齿；SVG无限缩放不会失真，画质始终清晰。

事件交互：Canvas无法对单个图形绑定事件，需手动计算坐标命中；SVG每个图形节点可直接绑定点击、悬浮等DOM事件。

性能场景：图形数量多、高频刷新（动画、游戏、数据大屏）场景Ca