canvas
canvas 是 HTML 5 新出的图片元素,它是 2d 绘图 API, 使用 JavaScript 调用API 可以画 lines, shapes, images, text 甚至其他你想话的, 并且不需要什么插件。
它是作为一个画布存在在网页中, 画布上有你绘制的图案,利用 js 你可以实时的改变画布上的图案,以实现动画。
它的支持性也挺好,IE 9 开始支持,Chrome和Opera 9+ 也支持。
svg
SVG 可缩放矢量图形, 是 XML 用来描述二维图形和绘图程序的语言。目前SVG在Firefox、Opera、Webkit浏览器、IE等浏览器中已经部分实现。
什么是 XML
它是一种类似于 HTML 的标记语言,设计宗旨在于传输数据而不是显示数据。
XML 数据以纯文本格式进行存储,因此提供了一种独立于软件和硬件的数据存储方法。通过读取你可以获取存储于其中的数据
SVG可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。图形和其组成部分可以变形,可以合成,还可以通过滤镜完全改变外观。
SVG提供了一些元素,用于定义圆形、矩形、简单或复杂的曲线,以及其他形状。
一个简单的SVG文档由 <svg>
根元素和基本的形状元素构成。另外还有一个g元素,它用来把若干个基本形状编成一个组。
eg:
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
可以看到 svg 是在内部组合各种元素绘制形成相应的图案。 并且矢量顾名思义是可以自由缩放的,根据屏幕像素点进行缩放,保留了图案的高清晰度。
总结
通过以上,我们可以知道 svg 和 canvas 的相同点,它们都是可以绘图的元素,并有自身的用法。
canvas 是一块画布,纯用 js 去画画的。根据你的 js 编写,动态去渲染画布上的图案,适用一些大量数据交互修改的,比较复杂的动画。由于它仅仅是根据你设定的大小,它是依赖于分辨率的。
而 svg 是一个个元素组成在一起的, 包含 animate 元素,可做一些小小的动画, 它的矢量优点也更适合做一些高保真的静态图片。