Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片。下面来介绍和分析一下他们。
一.Canvas 和 SVG 简介
1.什么是Canvas?
Canvas 是H5新出来的标签<canvas></canvas>
Canvas画布,利用JavaScript在网页绘制图像
在标签中给上宽高:<canvas width="800" height="800"></canvas> 不用加单位
如果在css中给宽高 会对图像造成拉伸 (默认宽高300px*150px)
通过过去绘制工具 .getContext("2d") 来在画布中绘制图形
2.什么是SVG?
SVG 可缩放矢量图形(Scalable Vector Graphics),基于可扩展标记语言XML 出来的时间比较老
SVG 用来定义用于网格的基于矢量的图形
二.Canvas 和 SVG 区别
1.绘制的图片格式不同
Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率,能够以 .png 和 .jpg格式保存存储图像,可以说是位图
SVG 可以在H5中直接绘制,但绘制的是矢量图
由于位图依赖分辨率,矢量图不依赖分辨率,所以Canvas和SVG的图片格式的不同实际上是他们绘制出来的图片的格式不同造成的。
2.Canvas不支持事件处理器,SVG支持事件处理器
Can