Canvas 和 SVG 绘图的区别

Canvas 和 SVG 都是 HTML5 提供的绘图工具，它们都可以用来画图，但是原理和方式不同。

Canvas 是一种在 HTML 中绘制图形的方法。它可以用 JavaScript 动态地绘制图形，例如创建动画、游戏场景等。Canvas 提供的绘图 API 让你可以通过 JavaScript 自定义绘制形状、路径、文本等等。Canvas 绘制的图形是位图，即像素的集合，它可以被保存成图片格式。Canvas 适合进行像素级别的图像绘制和动画制作。

SVG（Scalable Vector Graphics）是一种使用 XML 描述二维图形的语言。与 Canvas 不同，SVG 是矢量图，利用数学公式描述图形，可以缩放而不失真。SVG 也提供了一些 API 可以用来绘制图形和处理事件。SVG 适合用来制作图标、矢量图、数据可视化等。SVG 也可以通过 JavaScript 动态地修改和创建，但它不适合用来制作复杂的动画。

总之，Canvas 适合处理像素级别的图像，SVG 适合处理矢量级别的图像。两者在功能和使用方面都有自己的优势和适用范围。

canvas绘图：

<canvas id="myCanvas" width="200" height="200"></canvas>

<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
</script>
 

 

svg绘图：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="red" stroke="black" stroke-width="2"/>
</svg>