HTML如何绘制图形？canvas和SVG有什么区别？

网页开发中绘制图形主要有两种方式：html5 canvas 和 svg。一、canvas 是基于像素的画布，适合动态绘图和高频重绘场景，如游戏或实时图像处理，但不支持直接操作图形对象；二、svg 是基于矢量的图形格式，支持交互、响应式设计和 dom 操作，适合需要高质量显示和用户交互的图表或地图；三、两者关键区别在于类型、可访问性、交互性和性能特点不同，canvas 适用于大量图形渲染，svg 更适合结构化图形与交互。选择应根据项目需求决定。

在网页开发中，绘制图形主要可以通过两种方式实现：使用 HTML5 的 元素或者使用 SVG（可缩放矢量图形）。它们都能用来绘制图形、动画甚至复杂的可视化图表，但底层原理和适用场景有明显不同。

---

一、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 更偏向“结构+交互”，掌握基本用法后可以根据具体场景灵活选用。