经典⾯试题（讨论canvas与svg的区别）
讨论关于canvas和svg的区别。⾸先canvas是html5提供的新元素<canvas>，⽽svg存在的历史要⽐canvas久远，已经有⼗⼏年了。svg并不是html5专有的标签，最初svg是⽤xml技术（超⽂本扩展语⾔，可以⾃定义标签或属性）描述⼆维图形的语⾔。在H5中看似canvas与svg很像，但是，他们有巨⼤的差别。
⾸先，从它们的功能上来讲，canvas可以看做是⼀个画布。，其绘制出来的图形为标量图，因此，可以在canvas中引⼊jpg或png这类格式的图⽚，在实际开发中，⼤型的⽹络游戏都是⽤canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢⽤canvas来做⼀些统计⽤的图表，如柱状图曲线图或饼状图等。⽽svg，所绘制的图形为⽮量图，所以其⽤法上受到了限制。因为只能绘制⽮量图，所以svg中不能引⼊普通的图⽚，因为⽮量图的不会失真的效果，在项⽬中我们会⽤来做⼀些动态的⼩图标。但是由于其本质为⽮量图，可以被⽆限放⼤⽽不会失真，这很适合被⽤来做地图，⽽百度地图就是⽤svg技术做出来的。
另外从技术发⾯来讲canvas⾥⾯绘制的图形不能被引擎抓取，如我们要让canvas⾥⾯的⼀个图⽚跟随⿏标事件：canvas.οnmοuseοver=function(){}。⽽svg⾥⾯的图形可以被引擎抓取，⽀持事件的绑定。另外canvas中我们绘制图形通常是通过javascript来实现，svg更多的是通过标签来来实现，如在svg中绘制正
svg图形矩形形就要⽤<rect>，这⾥我们不能⽤属性来定义。我再来介绍⼀个svg的js库：TWO.JS。其中包含two.js和three.js前者⽤于绘制⼆维图形，后者⽤于绘制三维图形。TWO.JS可以⽀持三种格式，svg（默认）、canvas、和WEBGL。当然也可以在普通div中引⼊。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。