Canvas API

Canvas API 是 HTML 提供的一套用于在网页上绘制图形的接口。开发者通过 canvas 元素划出一块画布区域,再用 JavaScript 获取绘图上下文,以编程方式在其上绘制路径、文字、图像和动画。

概述

Canvas 采用即时模式的位图绘制:每次绘制都是直接向像素画布写入,浏览器不会保留所绘图形的对象结构。这与 SVG 的保留模式(以 DOM 节点描述矢量图形)形成对比。Canvas 更适合像素级、大量元素或高帧率的实时渲染。

核心特点

• 提供 2D 绘图上下文,支持路径、矩形、圆弧、贝塞尔曲线等基本图元。
• 可绘制文字、渐变、阴影,并对图像进行缩放、裁剪与合成。
• 能逐像素读取和修改画布数据,适合图像处理与滤镜。
• 结合定时刷新可实现动画与游戏画面。
• 同一 canvas 元素还可承载 WebGL 上下文用于三维渲染。

应用场景

Canvas 广泛用于绘制统计图表、数据可视化、网页小游戏、图像编辑与滤镜、二维码生成、签名板以及自定义动画等。当页面需要展示海量图形或进行像素级操作,而 DOM 与 SVG 性能不足时,Canvas 往往是首选方案。

常见问题

问:Canvas 和 SVG 该如何选择?答:图形数量少、需交互与可访问性时优先 SVG;图形密集、高帧率或需像素操作时优先 Canvas。

问:Canvas 内容能被搜索引擎读取吗?答:Canvas 绘制的是位图,没有语义结构,不利于 SEO 与无障碍访问,重要内容应提供替代文本或备用方案。