canvas基础的学习

canvas（画布）是html5新增的标签元素，用来定义图形，比如图表和其他图像。<canvas>标签只是图形容器，必须使用脚本（通常为javascript）来绘制图形。

canvas与svg的区别

canvas是HTML5提供的新元素<canvas>，而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。

首先，从它们的功能上来讲，canvas可以看做是一个画布。其绘制出来的图形为标量图，因此，可以在canvas中引入jpg或png这类格式的图片，在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。
另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。而svg，所绘制的图形为矢量图，所以其用法上受到了限制。因为只能绘制矢量图，所以svg中不能引入普通的图片，因为矢量图的不会失真的效果，在项目中我们会用来做一些动态的小图标。
但是由于其本质为矢量图，可以被无限放大而不会失真，这很适合被用来做地图，而百度地图就是用svg技术做出来的。

另外从技术发面来讲canvas里面绘制的图形不能被引擎抓取，如我们要让canvas里面的一个图片跟随鼠标事件：canvas.onmouseover=function(){}。而svg里面的图形可以被引擎抓取，支持事件的绑定。
另外canvas中我们绘制图形通常是通过JavaScript来实现，svg更多的是通过标签来来实现，如在svg中绘制正矩形形就要用<rect>，这里我们不能用属性style="width:XXX;height:XXX;"来定义。
我再来介绍一个svg的js库：TWO.JS。其中包含two.js和three.js前者用于绘制二维图形，后者用于绘制三维图形。TWO.JS可以支持三种格式，svg（默认）、canvas、和WEBGL。当然也可以在普通div中引入。

要从同一图形的一个<canvas>标记中移除元素，需要擦掉重新绘制；而svg很容易编辑，只要从其描述中移除元素即可。

以上是之前在别人博客中看到的，所以先引用过来，待之后熟练掌握canvas，svg再写自己的心得体会。

具体请参考 

  1、基本语法   

<canvas id="canvasMain" width="800" height="600" >您的浏览器不支持canvas</canvas> 

查看更多关于canvas基础的学习的详细内容...