HTML5中SVG与Canvas绘图技术的比较及选择依据

SVG和Canvas都是HTML5中用于绘图的技术，但它们有明显的区别：

1. SVG基于矢量图，意味着可以无限缩放而不失真。Canvas基于位图，缩放可能导致模糊。
2. SVG通过DOM操作图形，Canvas通过JavaScript API绘制。
3. SVG生成的是一个HTML结构，Canvas生成的是一个位图。
4. SVG对复杂动画支持较差，Canvas支持复杂动画。
5. SVG通常用于静态内容，Canvas适用于动态内容。

选择SVG还是Canvas，主要取决于你的需求：

• 如果需要绘制静态或简单动画，且对尺寸没有特别高要求，使用SVG。
• 如果需要绘制复杂动画或者对性能有要求，使用Canvas。
• 如果需要在保持分辨率的同时进行缩放，使用SVG。

下面是一个简单的SVG和Canvas绘制同样图形的对比：

SVG代码示例：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" stroke="black" fill="red" />
</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, 2 * Math.PI);
  ctx.fill();
</script>