网页开发中绘制图形主要有两种方式：html5 canvas 和 svg。一、canvas 是基于像素的画布，适合动态绘图和高频重绘场景，如游戏或实时图像处理，但不支持直接操作图形对象；二、svg 是基于矢量的图形格式，支持交互、响应式设计和 dom 操作，适合需要高质量显示和用户交互的图表或地图；三、两者关键区别在于类型、可访问性、交互性和性能特点不同，canvas 适用于大量图形渲染，svg 更适合结构化图形与交互。选择应根据项目需求决定。
在网页开发中，绘制图形主要可以通过两种方式实现：使用 HTML5 的 <canvas> 元素或者使用 SVG（可缩放矢量图形）。它们都能用来绘制图形、动画甚至复杂的可视化图表，但底层原理和适用场景有明显不同。
一、Canvas 是像素画布，适合动态绘图
<canvas> 就像是一块空白的画布，你需要通过 JavaScript 来在这块画布上“画画”。它本身不保留任何图形信息，只是最终画面的像素呈现。
特点：
立即学习“前端免费学习笔记（深入）”；
- 基于像素，适合做游戏、实时渲染、图像处理等。
- 图形一旦绘制完成就不再被浏览器记录，不能直接操作某个图形对象。
- 性能高，尤其适合大量图形频繁重绘的情况。
使用方法示例：
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 75); // 绘制一个红色矩形
</script>如果你需要频繁更新画面，比如做一个小游戏，Canvas 更合适。
二、SVG 是矢量图形，适合交互和响应式设计
SVG 是一种基于 XML 的矢量图形格式。你可以用标签直接定义图形元素，比如圆形、矩形、路径等，并且可以像操作 DOM 一样操作这些图形。
特点：
立即学习“前端免费学习笔记（深入）”；
- 基于矢量，放大不失真，适合图标、图表、地图等需要高质量显示的场景。
- 支持事件绑定，可以给每个图形元素添加点击、悬停等交互。
- 可以用 CSS 控制样式，也可以用 JS 操作节点。
使用方法示例：
<svg width="200" height="100"> <rect x="0" y="0" width="150" height="75" fill="#FF0000" /> </svg>
如果你希望图形可以交互、响应屏幕大小变化，或者需要与页面其他部分集成得更紧密，SVG 是更好的选择。
三、Canvas 和 SVG 的关键区别总结
| 特性 | Canvas | SVG |
|---|---|---|
| 类型 | 像素图（位图） | 矢量图 |
| 可访问性 | 不支持 | 支持文本内容和 ARIA 属性 |
| 可交互性 | 需手动检测位置并绑定事件 | 图形是 DOM 节点，可直接绑定 |
| 缩放表现 | 容易模糊 | 无损缩放 |
| 性能 | 适合大量图形高频重绘 | 适合少量图形精细控制 |
举个例子：如果要做一个天气图，数据点很多而且经常更新，Canvas 更高效；如果是做一个可点击的地图区域，SVG 更灵活。
基本上就这些。两者各有优势，选哪个要看你的项目需求。Canvas 更偏向“画”，SVG 更偏向“结构+交互”，掌握基本用法后可以根据具体场景灵活选用。
