<canvas>: 画布标签

最后更新：2026-10-13

<canvas>画布标签

通过 JavaScript 在网页上绘制图形、动画、图表（2D 或 WebGL），本身只是一个空白画布，内容由脚本生成。

<canvas width="300" height="150"></canvas>

该元素支持全局属性及以下专有属性：

属性	值	描述
`width`		画布宽度（像素），默认 300。
`height`		画布高度（像素），默认 150。

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
<canvas>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： canvas 本身没有绘图能力，必须用 JavaScript 的 getContext 才能画；要适配高分屏可结合 CSS 缩放。

Qcanvas 和 SVG 有什么区别？

A<canvas> 是位图绘制：JS 逐帧画像素，适合游戏、大量图元、实时滤镜，缩放会模糊；SVG 是矢量图：DOM 节点描述形状，缩放无损，适合图标、图表。像素级高频重绘选 canvas，可交互的矢量图形选 SVG。

Qcanvas 的宽高为什么不能用 CSS 设置？

Acanvas 有两套尺寸：HTML 属性 width/height 是绘制缓冲区的像素数（默认 300×150），CSS 尺寸只是拉伸显示。只用 CSS 改大小会把缓冲区拉伸变形模糊——正确做法是同时设置属性值和 CSS 尺寸，或按 devicePixelRatio 缩放。

Qcanvas 内容会被搜索引擎收录吗？

A不会——canvas 内部是像素，没有文本和 DOM 可爬。重要文字信息必须放在 canvas 外（标题、描述、无障碍替代文本），复杂应用建议提供 DOM 版兜底内容放在标签内作为回退。

更多案例即将上线，敬请期待。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。