HTML5中canvas与SVG有什么区别
1. 基本概念
HTML5中的canvas是一种图形绘制的标准，它的出现是为了能够在网页上动态的生成图形。而SVG则是定义了一种用于描述二维矢量图形的语言，是一项基于XML语法的标准。
从名字的字面含义来看，canvas是画布的意思，SVG是可缩放矢量图形（Scalable Vector Graphics）的缩写。
2. 绘图方式
2.1 canvas绘图方式
canvas是基于像素的绘图模式，即在画布上的每个元素都是直接呈现给用户的。绘制图形时，使用JavaScript来操控canvas元素，在画布上画出的图形是由矩形、直线、圆弧以及特定的图形路径组成的。
当需要更新画布上的某个元素时，必须先清除画布后再重新绘制更新后的元素。在canvas中，这个过程需要通过JavaScript来完成。
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
</script>
2.2 SVG绘图方式
SVG是基于矢量图形的绘图模式，即图形是由一系列的点、线、曲线等基本几何形状组成的。因为是矢量图形，所以图形会根据缩放比例而自动缩放。
更新SVG中的图形并不需要像canvas一样清除画布，只需要更新需要改变的元素即可。这是因为SVG的DOM结构中每个元素的属性都是可以直接访问和改变的。
<svg width="200" height="100">
<rect x="10" y="10" width="50" height="50" fill="red" />
</svg>
3. 支持情况
目前主要浏览器都支持canvas和SVG，但是一些较老的浏览器，如IE8及以下版本，可能不支持SVG。
4. 使用场景
canvas适合用于大量重复的绘图、小游戏、图像处理等需要快速操作像素的应用场景；而SVG则适合用于需要交互、可伸缩、具有动态效果的图形。
5. 总结
实际上，canvas和SVG并不是彼此互斥的，而是各具特色，应根据具体的应用场景选择使用何种方式进行绘图。