javascript svg

作者: 执丶落
来源: 51数据库
2020-09-30

1) svg绘制出来的每一个图形元素都是独立的DOM节点，可方便后期绑定事件或修改，而canvas输出的是一整幅画布；
2) svg输出的图形是矢量的，后期可以修改参数来自由放大缩小，无失真，canvas输出标量画布，就像一张图片一样。

　　区别一：
svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布；

区别二：
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿。

　　canvas是使用javascript程序绘图(动态生成)，svg是使用xml文档描述来绘图。
从这点来看：svg更适合用来做动态交互，而且svg绘图很容易编辑，只需要增加或移除相应的元素就可以了。
同时svg是基于矢量的，所有它能够很好的处理图形大小的改变。canvas是基于位图的图像，它不能够改变大小，只能缩放显示；所以说canvas更适合用来实现类似于flash能做的事情(当然现在canvas与flash相比还有一些不够完善的地方)。
关于最后一点二者谁更有前途：从上面我们可以知道二者是有不同用途的，作为一个开发者，你应该做的是理解应用程序的具体需求并选择正确的技术来实现它。