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>